WordPress: Customize TinyMCE Editor

Customize Wordpress TinyMCE Editor

WordPress uses TinyMCE as its default rich text editor.  Blog writers can easily create their posts with styles, media using a rich text editor. TinyMCE is one of the most popular rich text editor which is highly customizable and easy to implement.

In WordPress sometimes it needs to customize text editor for specific purposes. It is possible to configure this editor’s buttons and toolbars using WordPress hooks. In this tutorial, you will see how to customize TinyMCE Editor in WordPress.

You need  to edit functions.php in your WordPress theme in order to add this customization. It is highly recommended to use a child theme for such customizations. That will help you easily update parent theme without overriding your custom code.

Here is a piece of code as a quick demo. Just go through it and you will grasp what is going on.

function my_theme_TinyMCE( $in ) {
  $in['remove_linebreaks'] = false;
  $in['gecko_spellcheck'] = false;
  $in['keep_styles'] = true;
  $in['accessibility_focus'] = true;
  $in['tabfocus_elements'] = 'major-publishing-actions';
  $in['media_strict'] = false;
  $in['paste_remove_styles'] = false;
  $in['paste_remove_spans'] = false;
  $in['paste_strip_class_attributes'] = 'none';
  $in['paste_text_use_dialog'] = true;
  $in['wpeditimage_disable_captions'] = true;
  $in['plugins'] = 'tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
  $in['content_css'] = get_template_directory_uri() . "/editor-style.css";
  $in['wpautop'] = true;
  $in['apply_source_formatting'] = false;
        $in['block_formats'] = "Paragraph=p; Heading 3=h3; Heading 4=h4";
  $in['toolbar1'] = 'bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,wp_fullscreen,wp_adv ';
  $in['toolbar2'] = 'formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help ';
  $in['toolbar3'] = '';
  $in['toolbar4'] = '';
  return $in;
}
add_filter( 'tiny_mce_before_init', 'my_theme_TinyMCE' );

Let’s say you need to disable linking feature. So you can remove link and unlink from toolbar and update the code. Be aware that the changes you made will reflect in your frontend site as well as WordPress admin panel. You can use conditional statements apply the filter where it is required. Please see the video tutorial for more details.

Of course you can use a plugin for customizing TinyMCE editor. But if you are familiar with WordPress development you will see that plugin is too much for this simple requirement.

 

Leave a Reply

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