How to highlight shortcodes in tinyMCE editor

Question

I have shortcodes inside the tinyMCE editor that are enclosed in brackets like this:

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

Is it possible to apply a runtime style css to the tinyMCE editor contents so that any element that is in brackets (that's in my list of shortcodes*) gets a special css treatment to make them stand out?

The idea is that the shortcodes currently have no special color or formatting to differentiate them from any surrounding text and it can be difficult to work with them unless they stand out more.

My list of shortcodes (example):

[my_shortcode],[my_shortcode_2],[my_shortcode_3]

Update: I'll take what I can get on this one, but ideally, I only want to apply styling to the brackets, not the text that the brackets are wrapped around. So I'd like to apply a runtime css style to the shortcode brackets only: [my_shortcode] and [/my_shortcode] for example and leave the text that they enclose alone.

Answer 1

Highlighting shortcodes in text editor was long time a big unresolved issue. Finally there is a plugin that does exactly this.

HTML Editor Syntax Highlighter Plugin

Answer 2

The best way to provide highlighting for shortcodes or other elements is to use either a custom shortcode menu which will list all shortocodes and insert them into the editor area highlighted or even better use a syntax highlighter to highlight html, css, javascript and shortocodes (only when in raw mode)

a simple solution for this using codemirror is here: http://nikos-web-development.netai.net/blog/shortcodes-highlighting-overlay-in-codemirror/

Answer 3

You could tap into the keypress event and add formatting if the square brackets are typed in.

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

Answer 4

Problem here is that you cannot apply css to parts of text content of a html element. My solution approch would look like this: You will need to wrap those closed tags into a span with a special class. This way your shortcodes can be highlighted. When you submit your editor content to the server you will have to strip the spans with your special class and replace them with with its textContent.