Плагин TinyMCE для примеров кода в WordPress не работает на странице просмотра сообщений
Я тоже пытаюсь добавить подсветку кода для блога с возможностями TinyMCE 4.3.1. Сначала я не понимаю, почему у меня нет этого плагина в wp-includes/js/tinymce/plugins папка после обновления WP, поэтому мне приходится вставлять ее вручную.
Я добавил такой фильтр:
function mytheme_tinymce_settings( $settings ) {
$settings['plugins'] .= ",codesample";
$settings['toolbar1'] .= ",codesample";
return $settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );
Так что теперь у меня есть кнопка для добавления фрагментов кода, и она хорошо выделяется в поле редактора, но когда я публикую пост, появляется простой предварительный просмотр.
Когда я добавляю фильтр, чем /wp-includes/js/tinymce/plugins/codesample/plugin.min.js?wp-mce-4310-20160418 появляется на обеих страницах: страница редактирования и страница просмотра поста, но работает только для страницы редактирования.
Как заставить это работать на странице просмотра постов?
Решение
codesample Плагин использует Prism.js (и файл CSS) для обработки подсветки синтаксиса в TinyMCE. Это задокументировано здесь:
https://www.tinymce.com/docs/plugins/codesample/
Вероятно, вам просто нужно добавить Prism.js и Prism.css на вашу визуализированную страницу, чтобы получить выделение. Это задокументировано здесь:
https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage
Другие решения
Решение:
function mytheme_tinymce_settings( $settings ) {
$settings['plugins'] .= ",codesample";
$settings['toolbar1'] .= ",codesample";
return $settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );
Добавляет кнопку в tinyMCE.
wp_enqueue_style('prism','/wp-includes/js/tinymce/plugins/codesample/css/prism.css');
wp_enqueue_script('prism_js',plugins_url( 'js/run_code_highlighting.js', __FILE__ ), array('jquery'));
Добавляет файлы js и css на страницу (для этого я создал небольшой плагин).
jQuery(window).load( function() {
tinymce.codesampleplugin.Prism.highlightAll();
});
Запустите призменную подсветку для всех элементов на странице (готовый документ не работает — tinymce.codesampleplugin в данный момент равен нулю).
Постскриптум Может быть немного сложно добавить выделение в комментариях, если вы не обновляете страницу после обновления комментария, например.