WordPress可视化编辑器 - 着色短代码

Question

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

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

并希望为每个人提供独特的颜色，这样用户就可以轻松看到他应该改变的内容。

我找到了一些语法高亮显示HTML编辑器的解决方案，但没有人用于可视化编辑器本身。你知道一个实现这个目标的插件吗？

Answer 1

管理以获得有效的解决方案。

你需要什么：

TinyMCE Advanced插件

你应该做什么：

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

最后它看起来像这样：

修改

您需要自定义的课程：... /plugins/tinymce-advanced/mce/visualblocks/plugin.min.js

window.NodeList＆amp;＆amp; （a.addCommand（＆＃34; mceVisualBlocks＆＃34;，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;
}

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

如果我有时间，我会致力于更好的解决方案，但这符合我目前的所有要求。