Replace django-ckeditor with django-tinymce

[bemoody]

As we've discussed, PhysioNet's current rich text editor (CKEditor 4) is unmaintained and should be replaced. This branch replaces django-ckeditor with django-tinymce (https://github.com/jazzband/django-tinymce).

The user interface of TinyMCE is not too different from CKEditor 4. I've taken this opportunity, though, to try to tweak things to better serve PhysioNet's use cases. Notable changes include:

• A toolbar button for adding <code> tags (also accessible via Ctrl+D.)

• No toolbar buttons for <u>, <blockquote>, or <pre> tags (these styles are still accessible via the drop-down style menu.)

• No toolbar buttons for adding/removing links (links can still be added using Ctrl+K.)

• You can add italics, bold, code, equations, lists, and section headers using markdown-like syntax (*italics* becomes <em>italics</em>, etc.)

You'll see a warning if you try to navigate away or close the window without saving your changes. Also, content is auto-saved in local storage and can be restored by clicking the "Restore last draft" button at the end of the toolbar. Note that this does not import any auto-saved content from CKEditor.

[bemoody]

This breaks badly in old browsers: using Firefox 78, the editor mostly seems to work, but upon trying to save the form it crashes (which the user won't notice unless they are watching the console) and apparently submits blank content.

tinymce/tinymce#9557
tinymce/tinymce#9702
https://caniuse.com/css-not-sel-list

[tompollard]

This breaks badly in old browsers: using Firefox 78, the editor mostly seems to work, but upon trying to save the form it crashes (which the user won't notice unless they are watching the console) and apparently submits blank content.

Can we raise a warning for people with old browsers or would you prefer to explore alternatives? From googling, the latest version of CKEditor is popular (though I'm sure it has its own issues).

[bemoody]

I'm certainly willing to look at alternatives & that's part of why I wanted to post this as a preview.

But it also should be possible to add a workaround (my thought was to fall back to a plain textarea on old unsupported browsers.)

[tompollard]

But it also should be possible to add a workaround (my thought was to fall back to a plain textarea on old unsupported browsers.

Personally I'd rather just ask people using outdated browsers to update them!

[tompollard]

I have had a quick play around with this. It seems to work, so I'm not against switching to TinyMCE. My main thoughts are:

1. Autosave

We appear to have lost the "auto-save" feature, which I think is fairly important for preventing people losing their work (e.g. when they accidentally go back on the browser or click on a tab withoutsaving).

2. Style

The new editor is slightly less visually appealing (for me, at least). It feels busy. Compare CKEditor:

Vs TinyMCE:

[bemoody]

Thanks!

Autosave

Certainly a valid concern. Worth checking out the official autosave plugin: https://www.tiny.cloud/docs/tinymce/latest/autosave/

(CKE5 has an autosave plugin too; like all CKE5 plugins, it requires recompiling the editor)

Cluttered appearance

You have a point. I think the cluttered feeling may be due in part to the autoresize behavior, which initially I thought was cool but now I'm less sure about. Try turning that off - comment out "autoresize" from the list of plugins, and compare.

If there are specific things you'd like to tweak, it shouldn't be hard to add a little custom CSS here and there.

[bemoody]

Worth checking out the official autosave plugin: https://www.tiny.cloud/docs/tinymce/latest/autosave/

This doesn't give the same UX as the autosave plugin we have been using, but I think it should be sufficient. It does two things:

• if you've made changes, it warns you before leaving the page
• it auto-saves content to local storage, which can later be restored by clicking a button

Keep in mind that this plugin won't import autosave data from the CKE4 autosave plugin.

[bemoody]

Ugh, modal boxes (source code, equation editor) are not working now. There's some bad interaction with other site scripts, probably bootstrap stuff. (TinyMCE works correctly inside Django admin.)

Something was already screwy before this - with CKE4, if CKE4 tries to "pop up" a modal box, then the page "underneath" the modal box scrolls back to the top, which is annoying. But now (after I added toolbar_sticky) the modal box itself is invisible.

[bemoody]

this:

html,body{height:100%; width: 100%;}
html{ overflow: overlay; }