Upgrade TinyMCE to 4.0.20 and replaced tabbed HTML editor #3155
Conversation
cahrens
changed the title
Detailed commit messages: deleted old tinymce new tinymce js changes to support new tinymce scss changes for alignments Include all the controls on the toolbar that we previously had. Changes to support Bulk e-mail usage. adding new studio skin for TinyMCE4 Get handling of static image links working again. Delete old Studio skin. Version 1.3 of CodeMirror plugin. Modify paths for location of CodeMirror files. Fire events when CodeMirror Editor is open and closed. Needed to switch static links back and forth. Remove CodeMirror tabbed editor. fixed tinymce visual editor css Change how we detect that an image has been inserted. made the codemirror look more studio-like reordered the tinymce buttons Update unit tests. Update acceptance test for image plugin. Make sure to strip out temporary caret. It can get left behind in style blocks. Test for style block being maintained. Allow TinyMCE to create p's, else formatting doesn't work. Add tests for toolbar buttons and converting links. Add test for code format toolbar button. Remove unnecessary code. Remove unused testing templates and unused tabs. Update tinymce paths. Fire an event with the link plugin closes so we can rewrite links. pep8 Updates from code review. Change the name of the button to "Edit HTML". Changed menu name for consistency, but we don't show it. Changed name of "code" toolbar button to "Code block". Switch from tabbed Visual/HTML Editor for HTML modules to showing the code editor as a plugin within TinyMCE (triggered from toolbar). STUD-1422 Fire events before and after the image dialog is shown. We use this to rewrite links. Change the event handling for image plugin. Fixes FireFox bug, and allows us to correct the image path when we show the plugin (as opposed ot only correcting path when we close the plugin). Code review feedback. Fire events before and after the link dialog is shown. This allows us to convert the static links. Remove unnecessary helper method. keeping the component editor inside the component window Use compressed CodeMirror file. replaced code icon in TinyMCE editor; simplified UI on TMCE toolbar Change code editor icon to say HTML. Move code style block button. Update tests for minor UI changes. Code editor button no longer shows an icon, and code style toolbar button location has moved. Fix typos.
This gets around cross-origin issues on the CDN. Delete plugin.min.js as the Jake command will minimize into the full file.
Changed tiny-MCE to not load CSS files dynamically. Added CSS files for tiny-MCE in env files. Moved TinyMCE files to directory structure required by Jake command. Changed clients of "tinymce.min.js" to use "tinymce.full.min.js" instead. Updated CHANGELOG to indicate tinymce version 4.0.20. Renamed tinymce.css. Directions for creating tinymce.full.min.js and commenting of edX changes. Updated comments related to disabling dynamic JS and CSS file loading in tinymce. Allow TinyMCE to handle CSS within the iframe.
Needed for TinyMCE CodeMirror plugin.
…content-body element
…d Studio HTML xmodule preview Separating and documenting tinyMCE font imports from customized vendor code and customized render styling css files (because font must load first in iframe). Add the TinyMCE font file to the CMS pipeline.
|
This PR is ready for review. Note that the first commit is a squash of what was previously reviewed and submitted to master. So it is only necessary to review the commits after the first one. I have taken care to make the commits logical and have them overlap as little as possible. @frrrances and @talbs can you please review each other's changes? @andy-armstrong and @nasthagiri Please look again at my postMessage commit. I got rid of the GUID. @andy-armstrong Review everything else too. :) The code is up on http://studio.cahrens.m.sandbox.edx.org/. Also check out bulk e-mail usage in LMS instructor dashboard (http://cahrens.m.sandbox.edx.org/courses/edX/Open_DemoX/edx_demo_course/instructor). My sandbox is using the CDN to serve our static files like we do in production. |
|
Screenshot of the lms/envs/common.py diff, which GIT is declining to show. Note that we don't use the Studio-specific CSS on the LMS side now (which will be a change in behavior).
|
|
Screenshot of the instructor_dashboard.html diff. The changes are the same for instructor_dashboard_2.html.
|
|
👍 Looks good! Yay! I like the new way of authenticating the postmessage. |
|
👍 This was an epic, but worth it for the end result! |
|
👍 @frrrances, your work on this makes sense and looks good. Thanks for the help getting this sorted out and for the moral support in later stages. Nice work, @cahrens and @nasthagiri in getting this to the finish line :) |
|
Hooray! Fantastic work on total chaos. 👍 |
|
Here we go again! |
Upgrade TinyMCE to 4.0.20 and replaced tabbed HTML editor
|
@frrrances Glad this has been updated and merged again. But I just realized that the RTL align option has been disabled in the editor, which was kind of the whole point of updating to a newer tinymce version. Any chance of getting that back on? |
|
@abdoosh00 Yes, we weren't aware that it was disabled. Can you create a PR or let us know how to enable it as you would like? Thanks! |
This branch came from #3103. It reorders commits and combines all the commits related to switching to TinyMCE 4.0.20.
This PR continues #2657. We had 2 issues that we needed to resolve in order for TinyMCE to work on the LMS instructor page (bulk e-mail) in our production environment (which uses the Cloudfront CDN). Note that we do not host the static files on Cloudfront for Studio, which is why this bug was only an issue for LMS.
This PR corrects these 2 issues and also upgrades us to the most recent version of TinyMCE (4.0.20).