wp_editor implement using javascript on dynamic multiple textarea

WordPress provide extendability in our functionality. Due to this developer have the flexibility to modify it according to client requirement. Sometimes if you want to provide good user interface using WordPress component like editor, media. A Very common using component is WordPress editor. Whenever developer has task to provide HTML formatted text area. In that situation developer always use existing component like wp_editor. Its good & easily implemented. One advantage also there when the WordPress update same time it will also update.

You can easily apply the editor on the text editor using below example.

<textarea id="about_us"></textarea>

Add code in our plugin or functions.php

<?php wp_editor( "loaded content", "place your editor id without #", "setting array"); ?>
<?php wp_editor( $content, $editor_id, $settings = array() ); ?>

With the help of above code, you can populate the WordPress editor in the text area. But Its better for single and static textarea. But if you have multiple textarea then need to write to code for each textarea. So the code will increases. But the code review perspective code should be minimum for the requirement. It also fails when you have dynamic text area created using the jQuery. In that situation, it’s not loaded. So there is a need such an API that provides the generate the wp_editor using javascript.

Now for removing above issue WordPress release a new version of editor API. With the help of that, you load wp_editor using javascript. Due to this developer can load the editor using javascript. It’s very easy to load wp_editor on the text area with the usage of below steps.

First of all, need to enqueue the editor in the functions.php or plugin file like below

<?php wp_enqueue_editor(); ?>

It load the all js files related to wp_editor. Now you can load the editor in our js file where ever you want. New release provide the below functions.

    wp.editor.initialize();
    wp.editor.remove();
    wp.editor.getContent();

You can review code of new release and modify our js according to it.

Addition of TinyMCE to the Text Widget

Editor API changes in 4.8

(See wp-admin/js/editor.js for more info.)

Now the developer has more flexibility to add wp_editor on dynamically generated textarea. Due to this, you can create page builder like functionality. Due to this feature WordPress also add the editor in the widget section in the latest release.