如何在tinyMCE编辑器中突出显示快捷码

Question

我在tinyMCE编辑器中有一些短码，它们用括号括起来，如下所示：

[my_shortcode]some text that gets parsed by my shortcode function[/my_shortcode]

是否可以将运行时样式的css应用于tinyMCE编辑器内容，以便括号中的任何元素(在我的短码列表中*)都能得到特殊的css处理，使它们脱颖而出？

这个想法是，短码目前没有特殊的颜色或格式来区分它们与周围的任何文本，除非它们更突出，否则使用它们可能很困难。

我的快捷码列表(示例)：

[my_shortcode],[my_shortcode_2],[my_shortcode_3]

更新:我将从这篇文章中获得我能得到的东西，但理想情况下，我只想将样式应用于括号，而不是括号所环绕的文本。因此，我只想将运行时css样式应用于短码括号:例如my_shortcode和/my_shortcode，而不考虑它们所包含的文本。

Answer 1

这里的问题是，您不能将css应用于html元素的部分文本内容。我的解决方案看起来像这样:你需要用一个特殊的类把那些封闭的标签包装到一个span中。这样可以突出显示您的快捷方式代码。当您将编辑器内容提交到服务器时，您必须使用您的特殊类剥离跨度，并将它们替换为其textContent。

Answer 2

如果输入了方括号，您可以点击按键事件并添加格式。

http://www.tinymce.com/tryit/3_x/setup_editor_events.php

Answer 3

在文本编辑器中突出显示快捷代码长期以来是一个悬而未决的大问题。最后，有一个插件可以做到这一点。

HTML Editor Syntax Highlighter Plugin

​

​