regex - TinyMCE 使用正则表达式突出显示文本

Question

只是在这里问了一个关于正则表达式的问题，基本上我们需要给人们一个选项来选择文本的某些部分，这些部分将通过 Flash 前端的 MORE 按钮隐藏，当一些一个人会点击更多它会展开它。这是 tinyMCE 中的示例文本

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

所以这是捕捉开始和结束文本的正则表达式，

<start>(((?!<(?:\/end|start)>).)+)<\/end>

上面的表达式将用于剥离这个 SOME INNER TEST，我们会将其转换为 FLASH 友好的 MORE 按钮。

我的问题是，是否有任何方法可以在运行时(在编辑时)突出显示开始和结束标记内的文本，以便人们知道哪个部分将被“更多”按钮隐藏

Answer 1

好吧，伙计们拍拍我的肩膀:D 如果你不知道下面的代码是什么，那么学习 TinyMCE 初始化的基础知识。我已经在 jQuery 版本上完成了此操作。

这是我的解决方案

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

添加了三个自定义按钮

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

在初始化代码中添加setup:。

// 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 用于通过在编辑器内右键单击来显示/修复突出显示。一旦我 setSontent() 将光标移动到第一行的开头，就会出现突出显示的问题。

下面是将高亮显示在 [start][end] 标签周围的正则表达式函数。

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

嗯，到目前为止它正在为我服务。

只是 onSubmit 我正在尝试删除突出显示，这样它就不会进入数据库，一秒钟我可以看到突出显示已删除。但是它进入了数据库……所以现在就解决这个问题。

如果你们不明白任何部分，请告诉我。

注意:如果代码中有任何拼写错误，可能是这个堆栈溢出编辑器:)。注意:我知道这段代码可以改进很多，所以请赐教。