Skip to content

Upgrade TinyMCE to 4.0.20 and replaced tabbed HTML editor #3103

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
cahrens wants to merge 13 commits into from
Closed

Upgrade TinyMCE to 4.0.20 and replaced tabbed HTML editor #3103

cahrens wants to merge 13 commits into from

Conversation

@cahrens
Copy link

@cahrens cahrens commented Mar 28, 2014

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.

  1. TinyMCE was dynamically loading its skin and plugin files. This bypassed our hashed files that are produced by our static file pipeline. In addition to the fact that incorrect files could be returned if any of these files are subsequently edited (until the CDN cache expires), this issue meant we weren't using the hashed font file. On Firefox, font files from a different origin can't be used unless something is put into their headers to allow the access-- and that change had only been made to the hashed files, as produced in our pipeline. Hence, toolbar icons (which come from the font file) were not displaying on Firefox. Note that the annotations usage of TinyMCE exhibits this bug currently in production.
  2. The codemirror plugin for TinyMCE was attempting to access JavaScript variables from different origins. When running on the CDN, the codemirror plugin is running on Cloudfront, but the frame holding TinyMCE is on our courses.edx.org server. Communication between the codemirror iframe and the frame hosting TinyMCE most happen through postMessage, instead of direct access to JavaScript variables.

This PR corrects these 2 issues and also upgrades us to the most recent version of TinyMCE (4.0.20).

@nasthagiri
Copy link
Contributor

nasthagiri commented Mar 28, 2014

Here is the CHANGELOG for TinyMCE. We'll give the latest version (4.0.20) a try.
http://www.tinymce.com/develop/changelog/?type=tinymce

@nasthagiri
Copy link
Contributor

nasthagiri commented Mar 28, 2014

Here's the jake command to bundle all that we need:
jake minify bundle[themes:modern,plugins:image,link,codemirror,paste,table,textcolor]

This is how to create the minified file:

  1. Download TinyMCE 4.0.20 from https://github.com/tinymce/tinymce/tree/4.0.20
  2. Following directions in the README file (https://github.com/tinymce/tinymce/blob/4.0.20/readme.md), install Node.js.
  3. Create a directory where you will do the packaging (outside your edx platform code).
  4. Unzip TinyMCE 4.0.20 in that directory.
  5. In the directory, install jake and dependencies per the README file.
  6. Delete the contents of js/tinymce. Copy over the contents of /edx-platform/common/static/js/vendor/tiny_mce into the tinymce directory.
  7. Run the jake build command above. This will package the JavaScript code into a single file, tinymce.full.min.js. This is the file that should be checked in to our repo.

@devdob
Upgrade to TinyMCE 4.0.16.
51524a3 
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.
@cahrens cahrens changed the title WIP: Upgrade TinyMCE (again) Upgrade TinyMCE to 4.0.20 and replaced tabbed HTML editor Mar 31, 2014
cahrens and others added 12 commits March 31, 2014 09:45
Use postMessage to communicate between the iframe and TinyMCE.
35cec5a 
This gets around cross-origin issues on the CDN.
@nasthagiri
Tiny MCE version 4.0.20
58d6c26 
Changed tiny-MCE to not load CSS files dynamically.
Added CSS files for tiny-MCE in env files.

Add the rest of the stylesheets in env files.
Move back to original directory structure.
e487350
@nasthagiri
Changed clients of "tinymce.min.js" to use "tinymce.full.min.js" inst…
7f257e4 
…ead.
Add dialog plugin code to compressed JS file and CSS file.
1e16766 
Needed for TinyMCE CodeMirror plugin.
Do not load IE7 CSS.
cbb6290
Move TinyMCE CSS into its own file in pipeline.
be5188b
@nasthagiri
Moved TinyMCE files to directory structure required by Jake command.
f168053
Directions for creating codemirror-compressed.js
41b8774
@nasthagiri
Rebuild of TinyMCE.
b8f315d
removing tinymce button border only on active to counteract fun LMS b…
33b03c3 
…utton styles
@nasthagiri
Directions for creating tinymce.full.min.js
25bea82 
Updated comments for commented out code in tinymce.
@cahrens cahrens mentioned this pull request Apr 1, 2014
Merged
@cahrens
Copy link
Author

cahrens commented Apr 1, 2014

Closed in favor of #3155.

@cahrens cahrens closed this Apr 1, 2014
@nasthagiri nasthagiri deleted the christina/tinymce-update-cdn branch August 5, 2014 14:49
@baby636 baby636 mentioned this pull request Jan 10, 2023
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

4 participants

@cahrens @nasthagiri @devdob