10

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 );
            }
        });

        // command 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!

gsastry
  • 319
  • 2
  • 9
  • I pretty much have the same problem. I need to be able to highlight something matching a regex during typing in CKeditor. – Polygnome Jan 14 '14 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 Jan 14 '14 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 Nov 27 '17 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 Nov 27 '17 at 11:51

2 Answers2

3

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

  1. Walk the DOM tree of the CKEditor document and combine 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.

Community
  • 1
  • 1
noseratio
  • 59,932
  • 34
  • 208
  • 486
  • 1
    This seems to be a good way to go about it. I'll check that out tomorrow ;) – Polygnome Jan 21 '14 at 17:21
  • @Polygnome, it works for fragmentation cases like `broken` (`broken`), but you may need to account for other tags like `broken`. Check the tag name when you walk the tree and add a space (or other separator) to `S` for all tags but ``. – noseratio Jan 21 '14 at 21:02
  • @Noseratio I have a similar need to highlight beginning and end placeholder markers "{" and "}" respectfully, is this still your preferred approach? and do you have any example usages? – melutovich Nov 26 '17 at 23:51
  • @melutovich, sorry but I haven't been working with CKEditor pretty much since then and I can't publish that code. – noseratio Nov 27 '17 at 01:54
0

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

    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 );
        }
    });

    // command 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!

php-dev
  • 6,998
  • 4
  • 24
  • 38