wp.editor.initialize не показывает ту же панель инструментов по умолчанию

Вопрос или проблема

В пользовательском типе записей моего плагина на странице редактирования записи находится WP Editor внутри метабокса. В этом метабоксе есть кнопка для добавления WP Editors с помощью jQuery и Ajax. Мне удалось это сделать, но wp.editor.initialize( response.html.editor_id, { tinymce : true } ); не показывает ту же панель инструментов по умолчанию, что wp_editor(); в php, использованная для инициации первого WP Editor.

Первый WP Editor загружен с помощью PHP

введите описание изображения здесь

Второй WP Editor загружен с помощью jQuery

введите описание изображения здесь

Как мне получить одну и ту же панель инструментов по умолчанию для каждого tinymce?

Вы можете использовать приведенный ниже код для полнофункционального редактора. (Вам нужно будет внести некоторые изменения самостоятельно)

wp.editor.initialize ( 'EditorTextArea' , {

tinymce: {
    wpautop: 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: true ,
    fix_list_elements: 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

})

Вы также можете посмотреть здесь:
https://gist.github.com/rheinardkorf/aec4d46d3833d2f7a6a27c4481ba0b44

https://wp-kama.ru/question/wp-editor-initialize

Сообщите мне, если у вас возникнут какие-либо проблемы с этим.

Пожалуйста, добавьте этот код для одинакового макета для wp

wp.editor.initialize(editor_id,{
    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,
});

Ответ или решение

Проблема с различиями в панели инструментов редакторов в WordPress — это распространённый вопрос, особенно среди разработчиков, которые используют динамическое создание редакторов с помощью JavaScript и AJAX. Чтобы добиться одинаковой панели инструментов для редактора, инициализированного через jQuery, необходимо убедиться, что конфигурация этого редактора совпадает с теми параметрами, которые передаются в функции wp_editor() при его начальной загрузке.

Шаги для получения одинаковой панели инструментов для всех редакторов

  1. Параметры инициализации: Убедитесь, что передаваемые параметры в wp.editor.initialize() совпадают с теми, которые используются в wp_editor(). В вашем случае, необходимо обратить внимание на настройки tinymce и любые параметры, касающиеся кнопок и плагинов.

  2. Копирование конфигурации: Используйте следующее расширенное определение конфигурации для вашего вызова wp.editor.initialize(), чтобы соответствовать настройкам, предоставленным в PHP:

    wp.editor.initialize(editor_id, {
       tinymce: {
           wpautop: true,
           plugins: 'charmap, hr, lists, paste, tabfocus, textcolor, fullscreen, wordpress, wpeditimage, wpgallery, wplink, wptextpattern',
           toolbar1: 'formatselect, bold, italic, bullist, numlist, blockquote, alignleft, aligncenter, alignright, link, wp_more, spellchecker, fullscreen, wp_adv',
           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: true
    });
  3. Подключение Скриптов и Стилей: Убедитесь, что все необходимые скрипты и стили для работы TinyMCE загружены правильно. При добавлении нового редактора посредством AJAX это можно сделать, встраивая базовые скрипты и стили WordPress на вашу страницу.

  4. Проверка кода: Если вы продолжаете сталкиваться с проблемами отображения, проверьте код на наличие возможных конфликтов с другими плагинами или темами. Зачастую, CSS стили или JavaScript вашего плагина могут перебивать стандартные стили и поведение редактора WordPress.

  5. Тестирование: После внесения изменений следует протестировать процесс добавления новых редакторов. Создайте несколько редакторов на странице редактирования и проверьте, соответствует ли их функциональность вашему начальному редактору.

  6. Обращение к документации: Если требуется, загляните в официальную документацию WordPress (Codex) для более глубокого понимания структуры параметров wp_editor() и wp.editor.initialize(). Это поможет избежать ошибок и недоработок при настройке.

Заключение

Благодаря вышеописанным шагам вы сможете добиться одинакового отображения панелей инструментов для всех экземпляров редактора, созданных на вашем сайте. Если вы столкнетесь с дополнительными проблемами, может оказаться полезным обратиться в сообщество разработчиков WordPress или на специализированные форумы, где можно получить поддержку от более опытных коллег.

Оцените материал
Добавить комментарий

Капча загружается...