In a custom post type of my plugin, for the edit post page, there is a WP Editor inside a metabox. In this metabox there is a button to add WP Editors via jQuery and Ajax. I managed to do it but wp.editor.initialize( response.html.editor_id, { tinymce : true } ); does not show the same default toolbar than wp_editor(); in php used to init the first WP Editor.

First WP Editor loaded by PHP

enter image description here

Second WP Editor loaded by jQuery

enter image description here

How can I get the same default toolbar for each tinymce ?


Please Add this code for same layout for wp

    tinymce: {
      wpautop: true,
      plugins : 'charmap colorpicker hr lists paste tabfocus textcolor fullscreen wordpress wpautoresize wpeditimage wpemoji wpgallery wplink wptextpattern',
      toolbar1: 'formatselect,bold,italic,bullist,numlist,blockquote,alignleft,aligncenter,alignright,link,wp_more,spellchecker,fullscreen,wp_adv,listbuttons',
      toolbar2: 'styleselect,strikethrough,hr,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help',
      textarea_rows : 20
    quicktags: {buttons: 'strong,em,link,block,del,ins,img,ul,ol,li,code,more,close'},
    mediaButtons: false,

You can use below code for full fledged editor.(You have to make some changes by your own)

wp.editor.initialize ( 'EditorTextArea' , {

tinymce: {
    wpautop: to true ,
    theme: 'modern' ,
    skin: 'lightgray' ,
    language: 'en' ,
    formats: {
        alignleft: [
            {selector: 'p, h1, h2, h3, h4, h5, h6, td, th, div, ul, ol, li' , styles: {textAlign: 'left' }},
            {selector: 'img, table, dl.wp-caption' , classes: 'alignleft' }
        aligncenter: [
            {selector: 'p, h1, h2, h3, h4, h5, h6, td, th, div, ul, ol, li' , styles: {textAlign: 'center' }},
            {selector: 'img, table, dl.wp-caption' , classes: 'aligncenter' }
        alignright: [
            {selector: 'p, h1, h2, h3, h4, h5, h6, td, th, div, ul, ol, li' , styles: {textAlign: 'right' }},
            {selector: 'img, table, dl.wp-caption' , classes: 'alignright' }
        strikethrough: {inline: 'del' }
    relative_urls: false ,
    remove_script_host: false ,
    convert_urls: false ,
    browser_spellcheck: to true ,
    fix_list_elements: to true ,
    entities: '38, amp, 60, lt, 62, gt ' ,
    entity_encoding: 'raw' ,
    keep_styles: false ,
    paste_webkit_styles: 'font-weight font-style color' ,
    preview_styles: 'font-family font-size font-weight font-style text-decoration text-transform' ,
    tabfocus_elements: ': prev ,: next' ,
    plugins: 'charmap, hr, media, paste, tabfocus, textcolor, fullscreen, wordpress, wpeditimage, wpgallery, wplink, wpdialogs, wpview' ,
    resize: 'vertical' ,
    menubar: false ,
    indent: false ,
    toolbar1: 'bold, italic, strikethrough, bullist, numlist, blockquote, hr, alignleft, aligncenter, alignright, link, unlink, wp_more, spellchecker, fullscreen, wp_adv' ,
    toolbar2: 'formatselect, underline, alignjustify, forecolor, pastetext, removeformat, charmap, outdent, indent, undo, redo, wp_help' ,
    toolbar3: '' ,
    toolbar4: '' ,
    body_class: 'id post-type-post-status-publish post-format-standard' ,
    wpeditimage_disable_captions: false ,
    wpeditimage_html5_captions: true

Quicktags: true,
mediaButtons: true


You can also check look at here: https://gist.github.com/rheinardkorf/aec4d46d3833d2f7a6a27c4481ba0b44


Let me know if you are facing any issue in this.

  • Thank you BUT your solution is hard coded. I need to get dynamically settings. As you can see, there are different buttons from others plugins like wpDataTables for example.
    – J.BizMai
    Jan 23 '19 at 14:52

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.