[Tutorial] How to Use TinyMCE WYSIWYG Editor in WordPress Plugin / Theme Admin Page

Updated on : 8 November 2018.
In some case we need to store HTML data for our WordPress plugin or theme admin  settings/options. We want to add/edit this HTML in visual mood. So we have to use an  WYSIWYG editor with inputs fields.  There are some JavaScript library to create WYSIWYG editor with HTML input fields ( mostly for <textarea>). Most people like TinyMCE Library. TinyMCE is a platform independent web based JavaScript HTML WYSIWYG editor control released as Open Source under LGPL by Moxiecode Systems AB. TinyMCE has the ability to convert HTML TEXTAREA fields or other HTML elements to editor instances. TinyMCE is very easy to integrate into other Content Management Systems. In WordPress there is a build in TinyMCE library. WordPress is using this TinyMCE WYSIWYG editor in post/page editor page.  But some times we need to use this editor with any other field like theme settings page. Here I will show you how to use this build in WordPress TinyMCE Editor with your own fields.


To add TinyMCE we have to include some JavaScript , CSS and images  for this library. As WordPress  has this library build in.There was a WP function wp_tiny_mce() to call  this library. But this is pretty much complex to use and this function is deprecated now. Don’t worry,  There is another new  simple WordPress function wp_editor() to handle the whole process  to  use this library.


This function is very easy to use. Assume you have a text  input field named ‘mytext’ and you want to edit it’s data in visual mood by  using  an WYSIWYG editor.  Following codes will let you do that.

$my_content="Some Text"; // this var may contains previous data that is stored in mysql. 
wp_editor($my_content,"mytext", array('textarea_rows'=>12, 'editor_class'=>'mytext_class')); 

You don’t need to use any HTML element for this field ‘mytext’,  wp_editor() function creates a <textarea> element automatically.



(string) (required) Initial content for the editor.

Default: None
(string) (required) HTML ID attribute value for the textarea and TinyMCE. (may only contain lower-case letters)

Default: None
(array) (optional) An array of arguments.

Default: None


(boolean) (optional) Whether to use wpautop for adding in paragraphs

Default: true
(boolean) (optional) Whether to display media insert/upload buttons

Default: true
(string) (optional) The name assigned to the generated textarea and passed parameter when the form is submitted. (may include [] to pass data as array)

Default: $editor_id
(integer) (optional) The number of rows to display for the textarea

Default: get_option(‘default_post_edit_rows’, 10)
(integer) (optional) The tabindex value used for the form field

Default: None
(string) (optional) Additional CSS styling applied for both visual and HTML editors buttons, needs to include <style> tags, can use “scoped”

Default: None
(string) (optional) Any extra CSS Classes to append to the Editor textarea

(boolean) (optional) Whether to output the minimal editor configuration used in PressThis

Default: false
(boolean) (optional) Whether to replace the default fullscreen editor with DFW (needs specific DOM elements and css)

Default: false
(array) (optional) Load TinyMCE, can be used to pass settings directly to TinyMCE using an array()

Default: true
(array) (optional) Load Quicktags, can be used to pass settings directly to Quicktags using an array()

Default: true

Play with TinyMCE editor via JavaScript

You may need to add your custom listener function to various events of the editor. For example, you want to do something when the editor content has been changed. Also you may want to add your custom button to the editor toolbar. You can add your custom settings to TinyMCE of WP Editor through `tinymce-editor-setup` event.
References : https://make.wordpress.org/core/2017/05/20/editor-api-changes-in-4-8/

This event passes two arguments.
event : event object
editor : object of tinymce.Editor for the current Editor. tinymce.Editor class contains the core logic for a TinyMCE editor.
See the full reference of tinymce.Editor object
Also see the reference of TinyMCE editor Events

Here is a basic example :

$( document ).on( 'tinymce-editor-setup', function( event, editor ) {
	editor.on('Change', function (e) {
		console.log("Editor content : "+editor.getContent());
		//trigger a custom event
		$(document).trigger('custom_wp_editor_change', [editor]);
		//do more here on change event
	//add more listener here

Here we added a custom listener to the Change event of TinyMCE editor. But this code has a problem. This will add custom listener to all instance of TinyMCE editor in the page. If you want to add your custom settings/function only for specific editor then you have to do a small trick.
Here’s an example of how to add custom settings/function only for specific editor:

$( document ).on( 'tinymce-editor-setup', function( event, editor ) {
	var EDITOR_ID = editor.settings.id;
	if( EDITOR_ID == 'your_editor_id' )

		editor.on('Change', function (e) {
			console.log("Editor content : "+editor.getContent());
			//trigger a custom event
			$(document).trigger('custom_wp_editor_change', [editor]);
			//do more here on change event
	//add more listener here

Here’s an example of how to add few of the default TinyMCE buttons to the toolbar:

jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
    editor.settings.toolbar1 += ',alignleft,aligncenter,alignright';

Here is another example of how to add a custom button:

jQuery( document ).on( 'tinymce-editor-setup', function( event, editor ) {
    editor.settings.toolbar1 += ',mybutton';
    editor.addButton( 'mybutton', {
        text: 'My button2',
        icon: false,
        onclick: function () {
            editor.insertContent("It's my button!");


As a WordPress Plugin Developer You Should Know Following Topics:

This Article Meets Your Following Questions about WordPress TinyMCE WYSIWYG Editor

  • How to manually insert wysiwyg editor in wordpress form
  • wordpress WYSIWYG admin plugin
  • WYSIWYG edit wordpress theme
  • how to use tinymce editor in wordpress plugin development
  • wp WYSIWYG editors functionality
  • Use HTML Editor with your admin settings fields
  • Use TinyMCE editor with any WordPress input fields
  • Custom use of wp_editor() Function


  1. hi,
    Which file to put the code?
    thank you


    1. You don’t need to put any file. Just put these codes any where you need WYSIWYG editor.


  2. What would be the best way to implement this to a NextGen Gallery Image Descriptions text area? So that when adding descriptions, I can use the Rich Editor instead of the text editor.


  3. Hi,

    Thanks for your article.

    I have a problem. when I use your code in my theme options, the editor shows up on top of the page instead of the place that I wanted, also when I reset or save the page, I get an error message.

    Any advise would be appreciated.

    case ‘texteditor’:
    $ta_value = stripslashes($smof_data[$value[‘id’]]);
    $output .= ”. wp_editor($ta_value,$value[‘id’], array(‘wpautop’ => false,’textarea_name’=>$value[‘id’] ,’textarea_rows’=>12, ‘editor_class’=>’testtest’)).”;



  4. have you even use wp_editor in customizer repeator. i want to repeat the wp_editor when i click on add more button. so new editor will come. we are using clone method via js.


Leave a Reply

Your email address will not be published. Required fields are marked *


This site uses Akismet to reduce spam. Learn how your comment data is processed.