WordPress 中的 TinyMCE 代码示例插件在 post 查看页面上不起作用

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 简单的预显示。当我添加过滤器时，/wp-includes/js/tinymce/plugins/codesample/plugin.min.js?wp-mce-4310-20160418 出现在两个页面中：编辑页面和 post 查看页面，但仅适用于编辑页面。

如何让它在 post 查看页面上运行？

Answer 1

codesample 插件依赖于 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();
});

运行页面上所有元素的棱镜突出显示（文档就绪不起作用 - tinymce.codesampleplugin 此时为空）。

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

WordPress 中的 TinyMCE 代码示例插件在 post 查看页面上不起作用

TinyMCE codesample plugin in WordPress doesn't work on post view page

php

wordpress

tinymce

tinymce-4