Ticket #12844 (closed PLIP: fixed)
Switch to new version of TinyMCE
Reported by: | tom_gross | Owned by: | tom_gross |
---|---|---|---|
Priority: | minor | Milestone: | 4.3 |
Component: | Visual Editor | Version: | 4.3 |
Keywords: | Cc: |
Description (last modified by dkozar) (diff)
Proposer: Tom Gross
Seconder: Domen Kožar
Motivation
A lot of work was done to update TinyMCE to a newer version (3.4.9) during GSOC 2011. The current TinyMCE trunk (which uses 3.2.7 of the editor!) doesn't support IE9 and people started to implement various fixes to work around this issue. Some other features the new version comes with:
- new and simplified browser for links and images
- use of jQuery plugin and compressor -> fewer requests and size
- dexterity compatibility
This branch is in production on some of my installs for some time now and I know others use it in production too.
Proposal & Implementation
I propose to merge GSOC-3.4.x and use it for the next Plone version (4.3?).
The package is production ready and only needs to be merged to trunk. A detailed list of changes can be found here:
Risks
Since the new version of TinyMCE makes use of the jQuery plugin and the compressor the way it is included changed. People might face issues if they heavily customized the editor.
Participants
Domen Kožar (iElectric)
Tom Gross (tom_gross)
Progress
Editor is ready to be merged.
Attachments
Change History
comment:1 Changed 4 years ago by tom_gross
- Keywords VisualEditor removed
- Owner set to robgietema
- Component changed from Unknown to Visual Editor
- Milestone changed from 4.x to 4.3
comment:4 Changed 4 years ago by anthonygerrard
This PLIP is liable to break any bespoke plug-ins that have been developed. I don't see this as a major issue but it should be documented in the risks section.
I also feel that some documentation should be delivered to help third party developers migrate existing TinyMCE plug-ins to this new version. Maybe the best way to achieve this would be to write a guide to developing a new plug-in? As someone who has written a TinyMCE plug-in for Plone I can say that some documentation in this area would have saved me a lot of time.
comment:6 Changed 4 years ago by eleddy
need to make sure to review:
- link and image dialogue merged
- per field customization
Approved for 4.3, davisagli, looking for reviewers now!
comment:7 Changed 4 years ago by mitchell
There are a number of as-yet unaccepted open pull requests with seemingly important fixes here: https://github.com/collective/tinymce/pulls
I'd prefer if they were reviewed before merging. Can that be done as part of this process?
comment:8 Changed 4 years ago by davisagli
- Cc itconsense@… added
Hi Tom, I tried to do some work on reviewing this branch this evening, but I think I must not have set it up correctly. (tiny_mce_init.js is still being referenced but is a 404, styles are missing for the image/link dialogs, the style dropdown does not work.) Any idea what I'm doing wrong? Can you please provide instructions or a PLIP buildout so I can get to the point where I can successfully try out the improvements? thanks, David
comment:9 Changed 4 years ago by tom_gross
- Status changed from confirmed to assigned
- Cc itconsense@… removed
- Owner changed from robgietema to tom_gross
Documentation is at http://readthedocs.org/docs/productstinymce/en/latest/index.html
I created a buildout config at https://github.com/plone/buildout.coredev/blob/4.3/plips/plip12844-tinymce.cfg
and some notes at https://github.com/plone/buildout.coredev/blob/4.3/plips/implementation_notes/plip12844-tinymce.txt
comment:10 follow-up: ↓ 12 Changed 4 years ago by davisagli
- Status changed from assigned to confirmed
Tom, I ran the buildout you provided and created a new site. I did not run any upgrade steps for Products.TinyMCE because it claimed it was already at the latest version (as expected, since I just installed it!) When I bring up the link dialog the styling is broken as it was for me before. (I will attach a screenshot to this ticket.) Any ideas?
Changed 4 years ago by davisagli
-
attachment
Screen shot 2012-05-12 at 3.55.00 PM.png
added
Broken styles for link dialog
comment:11 Changed 4 years ago by davisagli
comment:12 in reply to: ↑ 10 Changed 4 years ago by datakurre
Replying to davisagli:
When I bring up the link dialog the styling is broken as it was for me before. (I will attach a screenshot to this ticket.) Any ideas?
I saw similar issue yesterday: https://dev.plone.org/ticket/12896
comment:13 follow-up: ↓ 14 Changed 4 years ago by dkozar
Since GSOC-3.4.x branch became master for Products.TinyMCE, I have updated plip buildout to reflect this change.
Below are inline comments regarding davisagli review:
The new link/image dialog implementation seems to function fine and have feature parity with the old one, but there are a number of visual glitches which make it look jarring and unfinished:
- Something is too wide so the Link Browser floats below, mostly off screen.
- The text is too big compared to elsewhere in the theme.
- A different icon set is used than elsewhere in Plone. We should be consistent.
- The standard Plone icons for content types are not aligned with their content item.
- The buttons are a weird style that is different from elsewhere in Plone. We should be consistent. (This is true for all tinymce dialogs, not just the custom Plone ones.)
- The "Advanced options" page has a blank dropdown of unclear function.
This is yet to be fixed. I did a quick peek today and seems like a few little fixes. I will keep you updated in following days.
The old version, 1.2, had support for multiple TinyMCE-enhanced fields on one page, with field-specific settings. This was accomplished by storing the settings for each field in the 'title' attribute of its textarea. The new version has no mechanism for doing this, since the settings are loaded as part of the cached tiny_mce_gzip.js. Can we keep the compressed resources but go back to the old way of loading the settings? We can put them in a data attribute rather than 'title' so that they don't show up when you hover over the field. If I'm reading correctly, this will also make it possible to always load tiny_mce_gzip.js from the same location (which is good for caching), rather than loading it relative to the current context so that context can be used to obtain settings.
Tom, what's the status on this one?
The problem with using data attributes is that tinymce/plone strips them as invalid. This should also be fix probably meanwhile.
The styles dropdown is not working for me. I created a new line of text and tried to make it a heading, and that did not work. (Possibly helped by https://github.com/collective/tinymce/pull/6 ?)
Fixed.
The "definition list" feature does not seem to work. It creates the list and I can enter the <dt>, but when I hit enter it does not switch to editing a <dd>
What browser? My testing shows that creating definition lists works, but when you click the button to stop editin definition items, whole markup disappears.
There is a test failure in test_getStyles which should be fixed.
Fixed.
Upstream tinymce is now up to version 3.5.0.1 but Products.TinyMCE only has 3.4.7. Is there any reason not to upgrade it further?
I would like to postpone that until we have 1.3 release which is considered stable. Major reason is that tinymce upgrades take time. Current 3.4.7 addresses IE9 compatibility, which should be high priority.
We should probably forward-port https://github.com/plone/Products.TinyMCE/commit/4937f74b8485c5800347c204385c3f0923b45e81 and https://github.com/plone/Products.TinyMCE/commit/9fb8b4d9a71a7db7089758d570376cf0a52e4b0b from master
Indeed, still on TODO.
Needs to be updated to not register the old resources when a Plone site is created.
"default" profile jsregistry includes jquery.tinymce.js, which is needed. Did you have anything else in mind?
The upgrade step needs to be run from plone.app.upgrade when Plone is upgraded.
Should I prepare pull request?
comment:14 in reply to: ↑ 13 Changed 4 years ago by tom_gross
Replying to dkozar: ...
Tom, what's the status on this one?
It is ready: https://github.com/plone/Products.TinyMCE/commit/fec23d82ebd72f8c85221eb5eaa290c173aaf29d
comment:15 Changed 4 years ago by dkozar
I fixed all current known blockers, except for merging two commits from 1.2.x branch: https://github.com/plone/Products.TinyMCE/blob/master/TODO.rst
Ready for review.
comment:16 Changed 4 years ago by tom_gross
Thanks dkozar! I cherry picked two commits from the TODO:
https://github.com/plone/Products.TinyMCE/commit/4937f74b8485c5800347c204385c3f0923b45e81
and
https://github.com/plone/Products.TinyMCE/commit/6aaf14e7e66592fce118d2050e699d66e14b201c
comment:17 follow-up: ↓ 19 Changed 4 years ago by anthonygerrard
Given this will break existing custom plugins it would be great if some documentation in this area could be added as per my comment above
comment:18 Changed 4 years ago by tom_gross
A upgrade step is here: https://github.com/plone/plone.app.upgrade/pull/3
comment:19 in reply to: ↑ 17 Changed 4 years ago by tom_gross
Replying to anthonygerrard:
Given this will break existing custom plugins it would be great if some documentation in this area could be added as per my comment above
I have never written a TinyMCE plugin myself but maybe you want to share your experiences. I can help with the inclusion into the official docs at http://productstinymce.readthedocs.org/en/latest/index.html
comment:20 Changed 4 years ago by esteele
- Status changed from confirmed to closed
- Version changed from 4.1 to 4.3
- Resolution set to fixed