TinyMCE Text hightlight with Regular Expression

Just asked a question on regular expression here, basically we need to give an option to people to select some part of text which will be hidden with a MORE button on flash front end, and when some one will click on MORE it will expand it. here is sample text in tinyMCE

some text <start> some inner test </end>

so here is the regular expression to catch this start and end text,

<start>(((?!<(?:\/end|start)>).)+)<\/end开发者_C百科>

the above expression will be used to strip this SOME INNER TEST and we will convert this to FLASH friendly MORE button.

My question is, Is there any way to highlight the text inside start & end tags on the fly (while editing) so people will know which part will be hidden for MORE button

Okay guys pat my shoulder on this :D If you don't know what are the code below then learn the basic of TinyMCE initializing. I have done this on jQuery version.

Here is my solution

var highlighter = 1; // A global variable, just to create a toggle for show/hide highlight

added three custom buttons

theme_advanced_buttons1: 'startmore, highlight, endmore, ...';

add setup: to initializing code.

// start highlight, end highlight and show highlight buttons

setup: function(ed) {
    ed.addButton('startmore', {
        title: 'Start More',
        image: 'images/end_s.png',
        onclick: function() {
            ed.selection.setContent('[start]');
        }
    });
    ed.addButton('endmore', {
        title: 'End More',
        image: 'images/end_m.png',
        onclick: function() {
            ed.selection.setContent('[end]');
            if (1 == highlighter) {
                highlight_tags();
            }
        }
    });
    ed.onInit.add(function(ed) {
       highlight_tags();
    });
    ed.onSubmit.add(function(ed, e) {
        var html_output = highlight_remove(tinyMCE.activeEditor.getContent());
        tinyMCE.activeEditor.setContent(html_output);
    });

    ed.addButton('highlight', {
        title: 'Show collapse selection',
        image: 'images/end_highlight.png',
        onclick: function() {
            if (1 == highlighter) {
                var html_output = highlight_remove(tinyMCE.activeEditor.getContent());
                tinyMCE.activeEditor.setContent(html_output);
                highlighter = 0;
            } else {
                highlight_tags();
                highlighter = 1;
            }
        }
    });
    ed.onContextMenu.add(function(ed, e) {
        tinymce.dom.Event.cancel(e);
        if (1 == highlighter) {
            highlight_tags();
        }
    });
}

onContextMenu is used to show / fix the highlight by right-clicking inside the editor. There are issue to show highlight on they fly as as soon I setSontent() it moves the cursor at the start of first line.

Below are the regular expression functions to put the highlight around the [start][end] tags.

function highlight_tags() {
  var html_output = tinyMCE.activeEditor.getContent();
  html_output = highlight_remove(html_output);
  var regex = new RegExp(/\[start\](((?!\[(?:end|start)\]).)+)\[end\]/ig);

  html_output = html_output.replace(regex,'<span style="background-color:> yellow;">[start]$1[end]</span>');
  tinyMCE.activeEditor.setContent(html_output);
}

function highlight_remove(html_output) {        
  var regex_fix = new RegExp(/<span\sstyle="background-color:\syellow;">(.+?)<\/span>/ig);
  return html_output.replace(regex_fix,'$1');
}

Hmm so far it is serving me.

Just onSubmit I am trying to remove the highlight so it wont go in database and for a second I can see that highlight is removed. But it goes in database... so fixing this now.

Let me know if you guys didn't understand any part.

NOTE: If there is any typo in code that might be this stack overflow editor :). NOTE: I know this code can be improved a lot, so enlighten me please.