It’s hard to say without seeing all the code.
Yes if you don’t refer to the instance – then it won’t really be a unique ID. Something like this would work – you would just reference the class property $id:
for ( $i = 0; $i <= count( $suffixes ); $i++) {
wp_editor( 'your content', "{$this->id}_$i" );
}
The js in core for the text widget create a random ID for the editor instances before it handles the instantiation, so you could translate that over to PHP if you wanted to follow that:
$el="el" . preg_replace( '/\D/', '', ( rand()/getrandmax() ) ) . '_';
Since your developing locally – you should turn on SCRIPT_DEBUG in your wp-config.php: define( ‘SCRIPT_DEBUG’, true ); to help you troubleshoot your issues with javascript. Doing so would make that error from minified files be a little more meaningful. The error is being caused by switchEditor method in editor.min.js. There’s special handling of the tinymce text widget in the customizer – and it’s not just as simple as calling wp_editor – though it could probably be done. You could try enabling the wp_skip_init process and adding your own initialization code perhaps:
add_filter( 'wp_editor_settings', 'ciseditor_wp_editor_settings', 5, 2 );
function ciseditor_wp_editor_settings( $settings, $id ) {
// look for your prefixed id and return the id associated with it.
if ( $ed = strstr( $id, 'foo_widget' ) ) {
$settings['tinymce'] = array(
'wp_skip_init' => true,
'wp_autoresize_on' => false, // turn off the auto resize height of editor.
);
$settings['editor_height'] = 300; // set the height
}
return $settings;
}
I’m pretty sure that won’t be the way to go though. I would recommend looking at wp-admin/js/text-widgets.js to see the handling of how core is implementing the text widget and the switch editor functionality – along with properly handling the data for the customizer. You should also reference wp-includes/widgets/class-wp-widget-text.php since you’re essentially wanting to make the same thing that already exists.
Generally having that error in tinymce means that the instance isn’t being removed and added back properly – so it makes sense that WordPress’ switchEditor in this context is throwing errors for you. There’s a lot of documentation in the text-widgets.js about how tinymce and dynamic DOM components will interact that have to be accounted for or you’ll end up with issues.
One quick solution might just be to disable quicktags for your editor instances, which could be done in the wp_editor_settings filter or you can also pass it in the settings array when you’re making the editors, ie:
wp_editor( 'your content', "{$this->id}_$i", array( 'quicktags' => false ) );
I did dynamically create tinymce instances on a project once in wordpress, and I just remember looking at the editor code in core to see what arguments and scripts they included to get everything working, so that’s always an option too. If you go that route – most of the things translate over 1:1 in terms of the php abstraction to js for the params. I think for the add media button I ended up creating my own thing, but there is the action ‘media_buttons’ so you should be able to just add that where it needs to be displayed.
Also consider why it is that you need multiple editors in one widget. Another way to handle this would be to remove the instances in an accordion style within the widget itself, and rebuild them as accordions are expanded so only one widget is displayed at a time. I think ultimately though – having one editor in a widget suits most use cases, and gives the end user flexibility to move content where they find it most fitting for their own use.