Вопрос или проблема
В пользовательском типе записей моего плагина на странице редактирования записи находится 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()
при его начальной загрузке.
Шаги для получения одинаковой панели инструментов для всех редакторов
-
Параметры инициализации: Убедитесь, что передаваемые параметры в
wp.editor.initialize()
совпадают с теми, которые используются вwp_editor()
. В вашем случае, необходимо обратить внимание на настройкиtinymce
и любые параметры, касающиеся кнопок и плагинов. -
Копирование конфигурации: Используйте следующее расширенное определение конфигурации для вашего вызова
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 });
-
Подключение Скриптов и Стилей: Убедитесь, что все необходимые скрипты и стили для работы TinyMCE загружены правильно. При добавлении нового редактора посредством AJAX это можно сделать, встраивая базовые скрипты и стили WordPress на вашу страницу.
-
Проверка кода: Если вы продолжаете сталкиваться с проблемами отображения, проверьте код на наличие возможных конфликтов с другими плагинами или темами. Зачастую, CSS стили или JavaScript вашего плагина могут перебивать стандартные стили и поведение редактора WordPress.
-
Тестирование: После внесения изменений следует протестировать процесс добавления новых редакторов. Создайте несколько редакторов на странице редактирования и проверьте, соответствует ли их функциональность вашему начальному редактору.
-
Обращение к документации: Если требуется, загляните в официальную документацию WordPress (Codex) для более глубокого понимания структуры параметров
wp_editor()
иwp.editor.initialize()
. Это поможет избежать ошибок и недоработок при настройке.
Заключение
Благодаря вышеописанным шагам вы сможете добиться одинакового отображения панелей инструментов для всех экземпляров редактора, созданных на вашем сайте. Если вы столкнетесь с дополнительными проблемами, может оказаться полезным обратиться в сообщество разработчиков WordPress или на специализированные форумы, где можно получить поддержку от более опытных коллег.