如何在tinyMCE编辑器中突出显示短代码

时间:2012-12-23 19:28:04

标签: css tinymce shortcode

我在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],并留下它们单独包含的文本。

4 个答案:

答案 0 :(得分:1)

问题在于,您无法将css应用于html元素的部分文本内容。 我的解决方案approch看起来像这样: 您需要将这些已关闭的标记包装到具有特殊类的范围中。这样就可以突出显示您的短代码。当您将编辑器内容提交给服务器时,您必须使用特殊类删除跨度,并将其替换为textContent。

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

为短代码或其他元素提供突出显示的最佳方法是使用自定义短代码菜单,该菜单将列出所有短代码并将其插入到突出显示的编辑器区域中,或者甚至更好地使用语法高亮显示来突出显示html,css,javascript和短代码(仅在原始模式下)

使用codemirror的简单解决方案是: http://nikos-web-development.netai.net/blog/shortcodes-highlighting-overlay-in-codemirror/

答案 3 :(得分:0)

在文本编辑器中突出显示短代码很长一段时间是一个未解决的大问题。最后有一个插件可以做到这一点。

HTML Editor Syntax Highlighter Plugin

Syntax Highlighting Wordpress Shortcodes