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');

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

官方文档

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，我更喜欢后者的样式

官方文档

可以自行选择样式和语言

自行选择插件

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

文档地址

在tinymceSet.php中添加代码

其中一个是plugin.js

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

function code_sample_add_external_plugin($mce_plugins){// 参考    $mce_plugins['codesample'] = ';; // 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', ';, array(), null);    wp_enqueue_script('prismjs-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.5Tips

本文的TinyMCE版本为v4.9.1

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

END