I want to be able to highlight (i.e. wrap in a span with a color, or some other way) all text that matches a regex in CKEditor. I'd probably add a button to do this, and a button to remove highlighting. My specific use case is to highlight all mustache variables in my HTML templates (make it really easy to see where there are mustache variables).

I've implemented a version where I replace a regex matching mustaches with a span and then the capture group. This appears to break on some templates when I test.

To remove the highlighting, I use editor.removeStyle, which doesn't seem to work in all cases.

Here is an example of what I've implemented:

editor.addCommand( 'highlightMustache', {
            exec: function( editor ) {
                editor.focus();
                editor.document.$.execCommand( 'SelectAll', false, null );
                var mustacheRegex = /{{\s?([^}]*)\s?}}/g;
                var data = editor.getData().replace(mustacheRegex, '<span style="background-color: #FFFF00">{{ $1 }}</span>');
                editor.setData( data );
            }
        });

        // mand to unhighlight mustache parameters
        editor.addCommand( 'unhighlightMustache', {
            exec: function( editor ) {
                editor.focus();
                editor.document.$.execCommand( 'SelectAll', false, null );
                var style = new CKEDITOR.style( { element:'span', styles: { 'background-color': '#FFFF00' },type:CKEDITOR.STYLE_INLINE,alwaysRemoveElement:1 } );
                editor.removeStyle( style );
                editor.getSelection().removeAllRanges();
            }
        });

Thanks!

I want to be able to highlight (i.e. wrap in a span with a color, or some other way) all text that matches a regex in CKEditor. I'd probably add a button to do this, and a button to remove highlighting. My specific use case is to highlight all mustache variables in my HTML templates (make it really easy to see where there are mustache variables).

I've implemented a version where I replace a regex matching mustaches with a span and then the capture group. This appears to break on some templates when I test.

To remove the highlighting, I use editor.removeStyle, which doesn't seem to work in all cases.

Here is an example of what I've implemented:

editor.addCommand( 'highlightMustache', {
            exec: function( editor ) {
                editor.focus();
                editor.document.$.execCommand( 'SelectAll', false, null );
                var mustacheRegex = /{{\s?([^}]*)\s?}}/g;
                var data = editor.getData().replace(mustacheRegex, '<span style="background-color: #FFFF00">{{ $1 }}</span>');
                editor.setData( data );
            }
        });

        // mand to unhighlight mustache parameters
        editor.addCommand( 'unhighlightMustache', {
            exec: function( editor ) {
                editor.focus();
                editor.document.$.execCommand( 'SelectAll', false, null );
                var style = new CKEDITOR.style( { element:'span', styles: { 'background-color': '#FFFF00' },type:CKEDITOR.STYLE_INLINE,alwaysRemoveElement:1 } );
                editor.removeStyle( style );
                editor.getSelection().removeAllRanges();
            }
        });

Thanks!

• javascript
• html
• ckeditor
• syntax-highlighting
• mustache

• I pretty much have the same problem. I need to be able to highlight something matching a regex during typing in CKeditor. – Polygnome Commented Jan 14, 2014 at 14:29
• 1 "This appears to break on some templates when I test." - How does it break? Also can you include a sample template in your question so that the problem can be reproduced? Similarly, "I use editor.removeStyle, which doesn't seem to work in all cases" - Can you give an example of where it doesn't work? – Ben Smith Commented Jan 14, 2014 at 22:24
• gsastry and @Polygnome what is your preferred solution now and do you have perhaps an example of it? As I have a similar need to highlight beginning and end placeholder markers "{" and "}" respectfully. – melutovich Commented Nov 27, 2017 at 11:39
• @melutovich The feature was put on hold, and about half a year later we switched to Redactor. I no longer work on that part of the project, so I am not certain how it got solved in the end. – Polygnome Commented Nov 27, 2017 at 11:51

2 Answers 2

The following approach worked for me in the past for a similar task:

1. Walk the DOM tree of the CKEditor document and bine all text nodes into a single string (let's call it S). Use CKEDITOR.dom.walker for that, this answer should help here. While walking the tree, build a collection of data structures (let's call it C) to store each text node object and the position of where its text starts within S.

2. Run your regex against S.

3. If the match is not found, stop.

4. Otherwise, using C collection, locate the start text node (let's call it SN), and offset within it, corresponding to the start character position of the match string inside S.

5. Using C collection, locate the end text node (let's call it EN), and offset within it, corresponding to the end character position of the match string inside S.

6. Create a CKEDITOR.dom.range object and position it using SN as the start and EN as the end (startContainer/startOffset/endContainer/endOffset).

7. Use CKEDITOR.dom.selection.selectRanges() to select the range from the previous step.

I wonder why don't you use a "reverse" Regex ofr the unhighlight mand?

    editor.addCommand( 'highlightMustache', {
        exec: function( editor ) {
            editor.focus();
            editor.document.$.execCommand( 'SelectAll', false, null );
            var mustacheRegex = /{{\s?([^}]*)\s?}}/g;
            var data = editor.getData().replace(mustacheRegex, '<span style="background-color: #FFFF00">{{ $1 }}</span>');
            editor.setData( data );
        }
    });

    // mand to unhighlight mustache parameters
    editor.addCommand( 'unhighlightMustache', {
        exec: function( editor ) {
            editor.focus();
            editor.document.$.execCommand( 'SelectAll', false, null );
            var mustacheRegex = /<span style="background-color: #FFFF00">{{\s?([^}]*)\s?}}<\/span>/g;
            var data = editor.getData().replace(mustacheRegex, '{{ $1 }}');
            editor.setData( data );
        }
    });

It should work fine!