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

In some case we need to store HTML data for our WordPrss Plugin or Themes admin  settings/options. We want to add/edit this HTML in visual mood. So we must 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 TinyMCE editor with your own fields.

WP TinyMCE WYSIWYG Editor

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. Using this function is very easy. 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
$mytext_var="Some Text"; // this var may contain previous data that was stored in mysql.
wp_editor($mytext_var,"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

 <?php wp_editor( $content, $editor_id, $settings = array() ); ?> 

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
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

6 Comments



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

    Reply

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

      Reply

  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.

    Reply

  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’)).”;
    break;”

    Thanks

    Reply

Leave a Reply

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