WordPress 可视化编辑器 - 为简码着色答案

【问题标题】：WordPress Visual Editor - Colorize ShortcodesWordPress 可视化编辑器 - 为简码着色
【发布时间】：2015-04-28 19:30:23
【问题描述】：

我想在 WordPress 可视化编辑器中以特定颜色突出显示短代码。例如。我有以下简码

[shortcode1] Some text [/shortcode1]
              ...
[shortcode2] Some text [/shortcode2]

并且想给每个人一个独特的颜色，这样用户就可以很容易地看到他应该改变什么。

我找到了一些语法高亮 HTML 编辑器的解决方案，但没有找到可视化编辑器本身的解决方案。您知道实现此目的的插件吗？

【问题讨论】：

标签： wordpress wp-editor

【解决方案1】：

设法得到一个可行的解决方案。

你需要什么：

TinyMCE 高级插件

你应该做什么：

自定义 TinyMCE 插件附带的 Visual Blocks 插件，并为您要突出显示的每个元素添加 css 类（只需遍历所有 p 元素并解析 innerHTML 并检查它是否包含您的特定模式）。

最后看起来像这样：

编辑

你需要自定义的类：... /plugins/tinymce-advanced/mce/visualblocks/plugin.min.js

window.NodeList &&(a.addCommand("mceVisualBlocks", function() {方法是你需要自定义的地方。只需在方法的开头插入一些代码：

var elements = a.getDoc().getElementsByTagName('p');
for (var i = 0; i < elements.length; i++) {
        // here you should do some Regex or simple string contains string check
        // of the innerHTML and set the css class of the element. E.g.:

 if((elements[i].innerHTML.indexOf("foo") >= 0 
     && elements[i].className.indexOf("baz") < 0){
            elements[i].className = "baz";
 }
}

在同一目录中，您可以找到 css/visualblocks.css 您应该像这样根据您的自定义添加一些 css：

.mce-visualblocks .baz {
    background-color: red;
}

您可以在顶部菜单栏中的可视化编辑器中切换突出显示（查看->显示块）。

如果我有时间，我会研究一个更好的解决方案，但这会满足我目前的所有要求。

【讨论】：