Colour manipulation of custom tags in niceEdit HTML editor ( JS / DOM )
- by Chris
Hi,
I would like to be able to highlight, during typing and in real time, certain custom tags in the format #tag_name# within the text of a nicEdit instance ( http://nicedit.com/ ).
My current attempt to implement as close to this as possible revolves around using the blur event of the editor to highlight the tags once the editor loses focus. I then use the following logic to wrap the tags in a span with a highlight class..
htmlEditor.addEvent( "blur", function( ) {
str = nicEditors.findEditor( "html_content" ).getContent( );
// Remove existing spans first, leaving just the tag ( this could mess up if the html has been edited directly )
str = str.replace( /(<span class=\"highlight\">)(.[^<]+)(<\/span>)/gi, "$2" );
// Then wrap all instances of a particular tag with the highlight span
str = str.replace( /#tag_name#/gi, "<span class='highlight'>#tag_name#</span>" );
nicEditors.findEditor( "html_content" ).setContent( str );
});
This is not ideal as my actual text now contains unwanted spans ( I only want the highlighting for the user's input experience, not to be saved to the database ). Obviously I could remove the spans before saving the text but the whole system is currently open to errors ( If the html is directly edited then other text may get highlighted etc ).
What I would like to know is..
Is there any way to directly change the colour of the tags in the editor or DOM without using a mechanism such as this? Perhaps a way of colouring the text in memory rather than changing the HTML ?
Any ideas ?
Regards
Chris P
