How to highlight shortcodes in tinyMCE editor

9
votes

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.

4
csstinymceshortcode
I don't think that it's possible to apply permanent styling for these blocks unless they'll be converted into blocks (spans or another inline elements). How about just highlighting them on demand, with designated button? - raina77ow
WYSIWYG + template tags = disaster. People always screw things up by adding bold/italics/crapPastedFromWordDocument. I'm looking forward to an answer to this, I could really use it myself - even if it's just a visual cue. I think your update is asking a bit much, you should take what you can get on this one because I don't think it will be so simple. - Wesley Murch
@Wesley - I'd prefer just to place the html code in vs shortcode. Once I have time to dig deeper into the tinyMCE API, I may bypass shortcodes and just add the relevant html code that the shortcode ultimately produces. - Scott B

4 Answers

1
votes

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.

0
votes

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

0
votes

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/

0
votes

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

Syntax Highlighting Wordpress Shortcodes