OD-378 [Feature] Upgrade TinyMCE 4 to TinyMCE 5 for Form component #375
Conversation
js/libs/builder.js
Outdated
| @@ -750,56 +750,6 @@ new Vue({ | |||
| this.accessRules.splice(accessRuleIndex, 1); | |||
| } | |||
| }, | |||
| setupCodeEditor: function() { | |||
There was a problem hiding this comment.
This looks like we're removing code editor from somewhere else in the form builder that's unrelated to the Rich Text field. It looks like the form submission confirmation HTML. We can't remove that.
What version of TinyMCE is running in the builder interface? If it's TinyMCE 4, then we can keep this running without having to change anything, right?
There was a problem hiding this comment.
I returned setup for builder.
|
The video at 0:20 showed that the Rich Text editor in the form builder just looks like an ordinary textarea. Once the field is relabelled to something custom, e.g. "Content" or "Bio", then it's indistinguishable from a text area field. We were OK not having TinyMCE initiated in the page preview in edit mode, but it's important that it's initiated in the form builder interface. What can we do here? Initialize TinyMCE? If we're stopping the initialization because it's running TinyMCE 4, then maybe our best bet is to run 2 different versions of the initialization config object. |
|
@tonytlwu If i got it correctly tinymce should be initialised:
And not initialised in edit-preview |
| statusbar: false, | ||
| toolbar: this.readonly || $vm.isInterface | ||
| ? ['bold italic underline alignleft aligncenter alignright alignjustify'].join(' | ') |
There was a problem hiding this comment.
Why would it have a toolbar if it's readonly? The previous code suggested that if it's readonly then toolbar: false.
| branding: false, | ||
| setup: function(editor) { | ||
| $vm.editor = editor; | ||
|
|
||
| editor.on('init', function() { | ||
| $vm.addPlaceholder(); | ||
| if ($vm.isInterface) { |
There was a problem hiding this comment.
If it's not interface, e.g. preview/live app, placeholder should also work as it currently does.
| @@ -983,29 +982,6 @@ new Vue({ | |||
| $(selector).removeClass('is-loading'); | |||
| } | |||
|
|
|||
| $($vm.$refs.templateDescription).tinymce({ | |||
@sofiiakvasnevska
Issue
OD-378 https://weboo.atlassian.net/browse/OD-378
Description
Upgraded TinyMCE from version 4 to 5.7.0.
Removed TinyMCE from interface.
Added
paste as plain textand clear formating plugins.Screenshots/screencasts
https://monosnap.com/file/lwX7YXRHRnWSfDU4NZs7cn1pdtIrEY
Backward compatibility
This change is fully backward compatible.
Reviewers
@upplabs-alex-levchenko @AndrRyaz @YaroslavOvdii