With WP 4.8 extending the widgets API, the simple text widget is using TinyMCE. The advantage is that TinyMCE scripts are already enqueued in Ajax requests.
However, for a client, I need a widget which has multiple editors inside it. This widget is not only used on the Widgets' Page but also within the Plugin Page builder by SiteOrigin.
With the new WordPress the following works in the widget form() function:
public function form( $instance ) {
// ...
foreach(cisI8Suffixes(true) as $suf) {
?><div class="cis_editor_bwrap" <?php echo (CIS_I8_ENABLE) ? 'data-cislan="'.cisLanFromSuf($suf).'"': ""; ?>><?php
wp_editor(cisI8Extract($instance, 'text', $suf), 'text'.$suf );
?></div><?php
}
$this->containerInputHTML($instance);
$this->linkWrapperInputHTML($instance);
}
However, it only works as long as I have only one widget as the IDs will be duplicated as soon as a second widget is created. I need either a random number or the widget ID (note: the str_replace is needed as wp_editor does not accept the minus sign in ids).
The following unfortunatly fails:
public function form( $instance ) {
// ...
foreach(cisI8Suffixes(true) as $suf) {
?><div class="cis_editor_bwrap" <?php echo (CIS_I8_ENABLE) ? 'data-cislan="'.cisLanFromSuf($suf).'"': ""; ?>><?php
wp_editor(cisI8Extract($instance, 'text', $suf), str_replace("-","_",$this->get_field_id('text'.$suf)) );
?></div><?php
}
}
Somehow WordPress does not correctly instantiate TinyMCE if a random number or the widget ID are within the editor ID. Error message is like this:
wp-tinymce.php?c=1&ver=4603-20170530:15 Uncaught TypeError: Cannot read property 'onpageload' of undefined
at h (wp-tinymce.php?c=1&ver=4603-20170530:15)
at m (wp-tinymce.php?c=1&ver=4603-20170530:15)
at h.l.bind (wp-tinymce.php?c=1&ver=4603-20170530:3)
at o.bind (wp-tinymce.php?c=1&ver=4603-20170530:5)
at Object.init (wp-tinymce.php?c=1&ver=4603-20170530:15)
at e (editor.min.js?ver=4.8:1)
at HTMLDocument.<anonymous> (editor.min.js?ver=4.8:1)
at a (wp-tinymce.php?c=1&ver=4603-20170530:3)
at HTMLDocument.p (wp-tinymce.php?c=1&ver=4603-20170530:3)
This is the HTML outputted by wp_editor if using possibility two:
<div class="wp-core-ui wp-editor-wrap html-active" id="wp-widget_ciseditor_c27_text-wrap">
<link href="http://localhost/hiedler/wp-includes/css/dashicons.min.css?ver=4.8" id="dashicons-css" media="all" rel="stylesheet" type="text/css">
<link href="http://localhost/hiedler/wp-includes/css/editor.min.css?ver=4.8" id="editor-buttons-css" media="all" rel="stylesheet" type="text/css">
<div class="wp-editor-tools hide-if-no-js" id="wp-widget_ciseditor_c27_text-editor-tools">
<div class="wp-media-buttons" id="wp-widget_ciseditor_c27_text-media-buttons">
<button class="button insert-media add_media" data-editor="widget_ciseditor_c27_text" id="insert-media-button" type="button"><span class="wp-media-buttons-icon"></span> Dateien hinzufügen</button>
</div>
<div class="wp-editor-tabs">
<button class="wp-switch-editor switch-tmce" data-wp-editor-id="widget_ciseditor_c27_text" id="widget_ciseditor_c27_text-tmce" type="button">Visuell</button> <button class="wp-switch-editor switch-html" data-wp-editor-id="widget_ciseditor_c27_text" id="widget_ciseditor_c27_text-html" type="button">Text</button>
</div>
</div>
<div class="wp-editor-container" id="wp-widget_ciseditor_c27_text-editor-container">
<div class="quicktags-toolbar" id="qt_widget_ciseditor_c27_text_toolbar"></div>
<textarea class="wp-editor-area" cols="40" id="widget_ciseditor_c27_text" name="widget_ciseditor_c27_text" rows="20"></textarea>
</div>
</div>
So my question is how can I solve this?
I have the two ideas:
Register the dynamic editor ID after widget creation/load and make it work. HOW?
Do not use wp_editor() at all but use textareas and apply TinyMCE to them dynamically. Problems: File Upload will be missing. How to apply TinyMCE scripts on every new widget/widget load?
Tried a lot of things so far but no luck.