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

Question

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

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

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

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

Answer 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;
}

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

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