Вопрос или проблема
Итак, я хочу улучшить функциональность редактора TinyMCE в WordPress, добавив к нему пользовательский JS-скрипт и CSS.
Мне удалось добавить пользовательский CSS, используя этот метод:
function plugin_mce_css($stylesheet) {
$stylesheet .= ',';
$stylesheet .= plugins_url ('editor.css', __FILE__);
return $stylesheet;
}
add_action( 'mce_css', 'plugin_mce_css' );
С его помощью я смог добавить стили к CSS-классу wp-editor, но когда речь зашла о добавлении пользовательского JS-скрипта, я не смог выполнить манипуляции с DOM-структурой Wp-editor после добавления JS-скрипта этим методом:
function custom_script() {
printf( '<script type="text/javascript" src="https://wordpress.stackexchange.com/questions/276256/%s"></script>', plugins_url('editor.js', __FILE__) );
}
add_action( 'after_wp_tiny_mce', 'custom_script' );
Что я делаю не так при добавлении JS? Мне нужна помощь.
Если результат поиска в Google привел вас сюда, посмотрите мой ответ на тот же вопрос на SO:
https://stackoverflow.com/a/77546495/1568334
Ответ или решение
Для добавления пользовательского JavaScript к редактору TinyMCE в WordPress, важно правильно выполнить подключение и учесть, что целью является модификация DOM внутри редактора. Рассмотрим детально, как это сделать.
Подключение кастомного CSS
Ваш метод подключения CSS через хуку mce_css верен. Это позволяет изменять стили внутри редактора. Примерно так же можно добавить и JavaScript, но здесь есть нюансы, которые нужно учесть.
Проблемы с подключением JavaScript
-
Некорректное место подключения: Хук
after_wp_tiny_mceиспользуется для выполнения кода после инициализации редактора, но в вашем случае, возможно, он вызывается не в нужный момент. -
Изоляция контекста TinyMCE: TinyMCE имеет свою изоляцию от остальной части страницы, и возможно, ваш скрипт не может взаимодействовать с нужными элементами по этой причине.
Правильное подключение JavaScript
Для точного и корректного добавления вашего JavaScript к TinyMCE, выполните следующие шаги:
Шаг 1: Используйте хук mce_external_plugins
Этот хук позволяет добавить ваш скрипт в качестве плагина для TinyMCE.
function my_custom_mce_plugins($plugins) {
$plugins['my_custom_plugin'] = plugins_url('editor.js', __FILE__);
return $plugins;
}
add_filter('mce_external_plugins', 'my_custom_mce_plugins');Шаг 2: Откройте доступ к вашему коду в JavaScript
Убедитесь, что ваш editor.js действительно содержит код, который может взаимодействовать с TinyMCE API. Например:
(function() {
tinymce.create('tinymce.plugins.MyCustomPlugin', {
init : function(ed, url) {
ed.on('init', function() {
console.log("Custom plugin loaded");
// Ваш код манипуляции DOM
});
}
});
tinymce.PluginManager.add('my_custom_plugin', tinymce.plugins.MyCustomPlugin);
})();Заключение
Ключом к успешному расширению функциональности TinyMCE является полное понимание его архитектуры и API. Убедитесь, что ваш скрипт правильно написан и учитывает специфичные для TinyMCE особенности. Путем точной интеграции вашего плагина через mce_external_plugins вы сможете без труда добавлять сложные пользовательские функции, увеличивая эффективность работы над контентом в WordPress.
Эта методология не только повысит качество вашего продукта, но и упростит процесс взаимодействия с редактором для конечных пользователей.