Question

我也尝试使用TinyMCE 4.3.1功能为博客添加代码突出显示。起初我不明白为什么在WP更新后我没有在wp-includes/js/tinymce/plugins文件夹中插入这个插件，所以我必须手动插入它。

我添加了这样的过滤器：

function mytheme_tinymce_settings( $settings ) {
    $settings['plugins'] .= ",codesample";
    $settings['toolbar1'] .= ",codesample";

    return $settings;
}
add_filter( 'tiny_mce_before_init', 'mytheme_tinymce_settings' );

所以现在我有按钮添加代码片段，它在编辑器字段中突出显示，但是当我发布post简单pre出现。当我添加过滤器时，/wp-includes/js/tinymce/plugins/codesample/plugin.min.js?wp-mce-4310-20160418出现在两个页面中：编辑页面和后期查看页面，但仅适用于编辑页面。

如何让它在后期视图页面上运行？

Answer 1

var selectedOption = $("input:radio[name=option]:checked").val()插件依赖于Prism.js（和一个CSS文件）来处理TinyMCE中的语法高亮。这在此处记录：

https://www.tinymce.com/docs/plugins/codesample/

您可能只需要将Prism.js和Prism.css添加到渲染页面以获得突出显示。这在此处记录：

https://www.tinymce.com/docs/plugins/codesample/#usingprismjsonyourwebpage

Answer 2

<强>解决方案：

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();
});

对页面上的所有元素运行prism高亮显示（文档就绪不起作用 - 此时tinymce.codesampleplugin为null）。

P.S。如果您在评论更新后不刷新页面，则在评论中添加突出显示可能会有点棘手。

WordPress中的TinyMCE codesample插件不适用于后视图页面

2 个答案: