Цель
У меня есть форум поддержки bbPress на моем WordPress веб-сайте, на котором используется панель инструментов TinyMCE . Я пытался добавить кнопку Исходный код , которая показывает всплывающее окно. В соответствии с примером Tiny это всплывающее окно будет выглядеть примерно так:
Обратите внимание, что в нем естьвниз список поддерживаемых языков для подсветки синтаксиса?
Research
Работа с настройкой панели инструментов TinyMCE для меня нова, поэтому мне пришлось провести много исследований, и я подумал, что знаю, что янужно сделать.
Я нашел этот ответ в StackOverflow, хотя и помеченный phpfox, но в нем все же изложены основные принципы.
Затем я нашел этот вопрос в StackOverflow, который предусматривал аналогичные шаги и был специально для WordPress.
Поскольку эти шаги включали Prism Я нашел учебник , объясняющий, как правильно настроить WordPress.
Progress
- Согласно этой веб-странице В нем говорится:
Вам необходимо добавить prism.js и prism.cssна вашу страницу, чтобы получить синтаксис выделенных примеров кода на вашей веб-странице (созданный плагином «Пример кода»). Плагин Code Sample использует следующие языки: разметка, javascript, css, php, ruby, python, java, c, csharp и cpp. Вы можете создать файлы prism.js и prism.css на странице download на веб-сайте Prism.
- Я зашел на веб-сайт prism и установил параметры изагрузил мои prism.js и prism.css файлы данных.
- Затем я загрузил их в подпапку дочерней темы моего веб-сайта.
- Я установил разрешения на 744, как указано в руководстве.
Добавил следующий код в мою дочернюю тему functions.php файл:
// Function to add prism.css and prism.js to the site
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/css/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/js/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
Затем я зашел на свой сайт и просмотрел страницу источника. Я мог видеть две ссылки на призму, поэтому я предположил, что этот шаг был сделан правильно.
Затем я загрузил полную библиотеку TinyMCE v4.9.4. Я выбрал эту версию, потому что она была такой же, как та, что я нашел в коде WordPress.
Я нашел плагин CodeSample и загрузил его в свою дочернюю тему. Путь к плагину был:
<child theme>/tinymce/plugins/codesample
Затем мне пришлось активировать плагин CodeSample на панели инструментов, и я попытался двумя способами.
function my_custom_plugins( $plugins ) {
$plugins['codesample'] = get_stylesheet_directory_uri().'/tinymce/plugins/codesample/plugin.min.js';
return $plugins;
}
add_filter( 'mce_external_plugins', 'my_custom_plugins' );
Я уже использовалплагин TinyMCE Advanced для добавления кнопки «Исходный код» на мою панель инструментов:
Теперь, когда я захожу на свой форум поддержки иперейти к созданию новой темы, и я хочу вставить пример исходного кода, это всплывающее окно, которое я вижу:
Можете ли вы увидетьпроблема? Почему в этом окне отсутствует раскрывающийся список Язык ?
Обновление
Я снова попробовал полный редактор и получилпонял, что кнопка, которую я добавил, не для того, что я хочу. Их два:
- Исходный код. Эта кнопка <> и должна отображать необработанное содержимое активного сообщения.
- Пример кода. Это должно показать окно примера кода. Кнопка {;}. Не разработано, как показать.
Обновление
Поэтому я попытался использовать эти настройки в Расширенная конфигурация TinyMCE * Плагин 1147 *:
К сожалению, когда я пытаюсь отобразить редактор, я получаю всплывающее сообщение об ошибке:
Не удалось инициализировать плагин: кодовый пример
Я исправил эту проблему. Я случайно загружал не ту версию плагина codeamples. Исправлено в версии 4.9.4. Я все еще не мог видеть кнопку на панели инструментов. Я решил добавить меню, и оно показывается там.
Однако, когда я вставляю, скажем, XML в это поле, я теряю все теги. Это другой вопрос. Хотя было бы неплохо иметь кнопку.