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.

WP EDITOR

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.

<?php 
$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.

Usage

Parameters

$content

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

Default: None

$editor_id

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

Default: None

$settings

(array) (optional) An array of arguments.

Default: None

Arguments

wpautop

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

Default: true

media_buttons

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

Default: true

textarea_name

(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

textarea_rows

(integer) (optional) The number of rows to display for the textarea

Default: get_option(‘default_post_edit_rows’, 10)

tabindex

(integer) (optional) The tabindex value used for the form field

Default: None

editor_css

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

Default: None

editor_class

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

Default:

teeny

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

Default: false

dfw

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

Default: false

tinymce

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

Default: true

quicktags

(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!");
        }
    });
});

• WordPress Media Uploader in Plugin
• Custom Meta Field to WordPress User Profile

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