How to customize default wordpress editor?

3 comments

1. I was looking for a solution to place custom metabox above the default editor and i’ve found the solution to my old question (how to customize the default editor with the wp_editor)!

   The solution was to unset the default editor first. Then create another metabox to to place the content then use wp_editor to create new its new instance, simple isn’t it?

   add_action( 'add_meta_boxes', 'page_meta_boxes' );
   public function page_meta_boxes()
   {
   
       global $_wp_post_type_features;
               //ive defined my other metaboxes first with higher priority
       add_meta_box(
           $id     =   'page_heading_meta_box',
           $title  =   __('Heading'),
           $callback   = array(&$this,'render_page_heading_metabox'),
           $post_type  =   'page',
           $context    =   'normal',
           $priority   =   'core'
           );
       add_meta_box(
           $id     =   'page_description_meta_box',
           $title  =   __('Description'),
           $callback   = array(&$this,'render_page_description_metabox'),
           $post_type  =   'page',
           $context    =   'normal',
           $priority   =   'core'
           );
       //check for the required post type page or post or <custom post type(here article)  
       if (isset($_wp_post_type_features['article']['editor']) && $_wp_post_type_features['post']['editor']) {
           unset($_wp_post_type_features['article']['editor']);
           add_meta_box(
               'wsp_content',
               __('Content'),
               array(&$this,'content_editor_meta_box'),
               'article', 'normal', 'core'
           );
       }
       if (isset($_wp_post_type_features['page']['editor']) && $_wp_post_type_features['page']['editor']) {
           unset($_wp_post_type_features['page']['editor']);
           add_meta_box(
               'wsp_content',
               __('Content'),
               array(&$this,'content_editor_meta_box'),
               'page', 'normal', 'low'
           );
       }
       }
   

   In this way we have registered a new metabox called content . Now time to place the editor

           function content_editor_meta_box($post)
       {
           $settings = array(
               #media_buttons
               #(boolean) (optional) Whether to display media insert/upload buttons
               #Default: true
               'media_buttons' => 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_name'=>'content',
   
               #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
               'tabindex' => '4'
   
               #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
           );
           wp_editor($post->post_content,'content');
   
       }
   

   Now you can fully customize your editor! This is how it looks now. Hope it is useful for you too!
   

   Log in to Reply

2. You can customize the editor (TinyMCE) with a filter, as shown here. Code snippet attached:

   function myformatTinyMCE($in)
   {
    $in['plugins']='inlinepopups,tabfocus,paste,media,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpfullscreen';
    $in['wpautop']=true;
    $in['apply_source_formatting']=false;
    $in['theme_advanced_buttons1']='formatselect,forecolor,|,bold,italic,underline,|,bullist,numlist,blockquote,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,wp_fullscreen,wp_adv';
    $in['theme_advanced_buttons2']='pastetext,pasteword,removeformat,|,charmap,|,outdent,indent,|,undo,redo';
    $in['theme_advanced_buttons3']='';
    $in['theme_advanced_buttons4']='';
    return $in;
   }
   add_filter('tiny_mce_before_init', 'myformatTinyMCE' );
   

   This code should be placed in your theme’s functions.php file. You may want to print_r( $in ) to see all the keys that are passed (I’ve omitted some of them here because I don’t believe the page that I linked to above is up-to-date). You can browse the latest source here. You’ll find the filters you’re looking for in function public static function editor_settings($editor_id, $set)

   Also, you may also want to make sure that this only happens for your baner post_type, as this will affect all instances of the editor that are created.

   Log in to Reply

3. You can try this Editor which you can add additional fields also it is simple to use and install

   Log in to Reply