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

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

Just onSubmit我正在尝试删除突出显示，因此它不会进入数据库，一秒钟我可以看到突出显示被删除。但是它存在于数据库中...所以现在就解决这个问题。

如果你们不理解任何部分，请告诉我。

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

TinyMCE文本突出显示正则表达式

1 个答案: