Richeditor editorOptions is not working as documented in Rich Editor / WYSIWYG Field - October CMS - 4.x. I think that this is happening since the 4.2 update.
We investigated the problem, maybe it will be useful for solving it:
When configuring the backend richeditor form widget with editorOptions in YAML, the options are rendered into the field markup as data-editor-options=“<?= e(json_encode($editorOptions)) ?>”.
However, in modules/backend/formwidgets/richeditor/assets/js/richeditor.js, the control expects this.config.editorOptions to already be a plain object:
if (this.config.editorOptions.constructor !== {}.constructor) {
this.config.editorOptions = {};
}
Since the value coming from the data-editor-options attribute is a JSON string, this check fails and editorOptions is reset to {}. As a result, valid Froala options configured in YAML are silently ignored.
Example YAML
text:
type: richeditor
editorOptions:
pastePlain: true
pasteDeniedTags: [div, section, h1, h2, h3, h4, h5, h6, img]
htmlAllowedAttrs: [href, src, alt, title]
Current Behavior
editorOptions arrives in JS as a string, for example:
'{"pastePlain":true,"pasteDeniedTags":["div","section"],"htmlAllowedAttrs":["href","src"]}'
Then it is discarded and replaced with {}.
Expected Behavior
The configured editorOptions should be passed to Froala as an object and merged into the Froala options, both in legacy mode and Vue connector mode.
Relevant Files
- modules/backend/formwidgets/RichEditor.php
- modules/backend/formwidgets/richeditor/partials/_richeditor.php
- modules/backend/formwidgets/richeditor/assets/js/richeditor.js
- modules/backend/vuecomponents/richeditordocumentconnector/assets/js/formwidgetconnector.js
- modules/backend/vuecomponents/richeditor/assets/js/richeditor.js
Possible Fix
Parse data-editor-options in the JS control before validating it:
if (typeof this.config.editorOptions === 'string') {
try {
this.config.editorOptions = JSON.parse(this.config.editorOptions);
}
catch (e) {
this.config.editorOptions = {};
}
}