WordPress自定义插件：代码高亮，允许内联样式，显示隐藏按钮

NO.1

创建插件

在wp-content/plugins目录下创建一个文件夹，名称为tinymceSet（名称随意取）

新建一个与文件夹同名的php文件tinymceSet.php

初始代码如下

<?php
/**
 *Plugin Name: TinymceSet
 *Description: 自定义tinymce插件.
 */

在管理后台-插件，刷新可以看到新注册的插件

如显示未启用，则点击启用

NO.2

经典编辑器

添加区块，选择经典

初始tinymce编辑器只显示少数几个功能按钮，还有一些按钮默认隐藏，需要使用代码启用

启用方式，在tinymceSet.php中添加代码

function add_mce_buttons($buttons)
{
    array_unshift($buttons, 'cut', 'copy', "paste", "image", "fontselect", "fontsizeselect", "styleselect", "sub", "sup", "backcolor", "forecolorpicker", "backcolorpicker", "visualaid", "anchor", "newdocument", "cleanup", "code", "selectall");
return $buttons;
}
// 添加隐藏按钮
add_filter('mce_buttons', 'add_mce_buttons');

保存后，刷新页面，就会发现按钮已经出现了

官方文档

https://www.tiny.cloud/docs-4x/advanced/editor-control-identifiers/#toolbarcontrols

NO.3

经典编辑器

允许内联样式

本文的红蓝标题样式复制到WordPress TinyMCE后，style属性丢失

这个原因是TinyMCE的安全策略，对script标签和style属性等进行内容过滤

解决方法

在tinymceSet.php中添加代码

function custom_tinymce_config($init)
{
// 允许所有标签和样式以及脚本（辅助style不被过滤）
    $init['extended_valid_elements'] = '*[*]';
    $init['valid_elements'] = '*[*]';
    $init['valid_children'] = '*[*]';
    $init['extended_valid_elements'] = 'style,link[href|rel],script';
    $init['custom_elements'] = 'style,link,~link,script';
    $init['verify_html'] = false;
// 这个属性决定了style属性不会被过滤
    $init['paste_webkit_styles'] = "all";
return $init;
}
// 初始化编辑器之前（当前tinymce版本为4.9.11）
add_filter('tiny_mce_before_init', 'custom_tinymce_config');

刷新后就可以复制标题等样式了，包括word文档内容样式

NO.4

代码高亮

WordPres的古腾堡编辑器和经典编辑器的代码块，样式都很简洁

公众号的代码块也相对简洁，对比highlightjs和prismjs，我更喜欢后者的样式

官方文档

https://prismjs.com/

可以自行选择样式和语言

自行选择插件

因为本文是TinyMCE v4.9.1的版本

文档地址

https://cdn.jsdelivr.net/npm/tinymce@4.9.11/plugins/codesample/

在tinymceSet.php中添加代码

其中一个是plugin.js

其他两个是prism官网按照你自己的喜好配置下载的prism.css和prism.js

function code_sample_add_external_plugin($mce_plugins)
{
// 参考https://cdn.jsdelivr.net/npm/tinymce@4.9.11/plugins/codesample/plugin.min.js
    $mce_plugins['codesample'] = 'https://xxx.com/wp-includes/js/tinymce/plugins/codesample/plugin.min.js'; // 

return $mce_plugins;

}
function code_sample_button($mce_buttons)
{

    $mce_buttons[] = 'codesample';

return $mce_buttons;

}
function code_sample_wp_scripts()
{
    wp_enqueue_style('prismjs-css', 'https://xxx.com/wp-includes/js/tinymce/plugins/codesample/css/prism.css', array(), null);
    wp_enqueue_script('prismjs-js', 'https://xxx.com/wp-includes/js/tinymce/plugins/codesample/js/prism.js', array(), null, true);
}
// 添加代码高亮
add_filter('mce_external_plugins', 'code_sample_add_external_plugin', 999, 1);
add_filter('mce_buttons', 'code_sample_button', 999, 1);
add_action('wp_enqueue_scripts', 'code_sample_wp_scripts');

细节优化

如果不指定下拉语言，那么下拉语言只会有默认的选项和顺序

如果想要添加语言和调整顺序

在tinymceSet.php中添加代码，上文的custom_tinymce_config方法中增加

// 设置代码高亮
    $init['codesample_languages'] = "[
        { text: 'Bash/Shell', value: 'bash' },
        { text: 'JavaScript', value: 'javascript' },
        { text: 'PHP', value: 'php' },
        { text: 'Python', value: 'python' },
        { text: 'HTML/XML', value: 'markup' },
        { text: 'CSS', value: 'css' },
        { text: 'Java', value: 'java' },
        { text: 'C', value: 'c' },
        { text: 'C#', value: 'csharp' },
        { text: 'C++', value: 'cpp' },
        { text: 'SQL', value: 'sql' }
            ]";

最终完整的函数

function custom_tinymce_config($init)
{
// 允许所有标签和样式以及脚本（辅助style不被过滤）
    $init['extended_valid_elements'] = '*[*]';
    $init['valid_elements'] = '*[*]';
    $init['valid_children'] = '*[*]';
    $init['extended_valid_elements'] = 'style,link[href|rel],script';
    $init['custom_elements'] = 'style,link,~link,script';
    $init['verify_html'] = false;
// 这个属性决定了style属性不会被过滤
    $init['paste_webkit_styles'] = "all";
// 设置代码高亮
    $init['codesample_languages'] = "[
        { text: 'Bash/Shell', value: 'bash' },
        { text: 'JavaScript', value: 'javascript' },
        { text: 'PHP', value: 'php' },
        { text: 'Python', value: 'python' },
        { text: 'HTML/XML', value: 'markup' },
        { text: 'CSS', value: 'css' },
        { text: 'Java', value: 'java' },
        { text: 'C', value: 'c' },
        { text: 'C#', value: 'csharp' },
        { text: 'C++', value: 'cpp' },
        { text: 'SQL', value: 'sql' }
            ]";
return $init;
}

NO.5

Tips

本文的TinyMCE版本为v4.9.1

前几年写WordPress面临编辑器二选一的问题，现在古腾堡里面内置了经典编辑器，省去了很多麻烦，也解决了以前使用插件插入简码特殊效果和很难插入HTML代码的问题

END.