10

我希望能够突出显示（即用颜色或其他方式包裹在跨度中）与CKEditor 中的正则表达式匹配的所有文本。我可能会添加一个按钮来执行此操作，并添加一个按钮来删除突出显示。我的具体用例是突出显示我的 HTML 模板中的所有 mustache 变量（让它很容易看到哪里有 mustache 变量）。

我已经实现了一个版本，其中我用一个跨度替换了一个正则表达式匹配的胡须，然后是捕获组。当我测试时，这似乎在某些模板上中断。

要删除突出显示，我使用 editor.removeStyle，它似乎不适用于所有情况。

这是我实现的示例：

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

谢谢！

4

2 回答 2

3

以下方法过去对我有用，用于类似的任务：

  1. 遍历 CKEditor 文档的 DOM 树并将所有文本节点组合成一个字符串（我们称之为S）。CKEDITOR.dom.walker为此，这个答案应该在这里有所帮助。在遍历树的同时，构建一个数据结构集合（我们称之为C）来存储每个文本节点对象及其文本在其中开始的位置S。

  2. 针对S.

  3. 如果未找到匹配项，则停止。

  4. 否则，使用C集合，定位起始文本节点（我们称之为SN），并在其中偏移，对应于内部匹配字符串的起始字符位置S。

  5. 使用C集合，找到结束文本节点（我们称之为EN），并在其中偏移，对应于内部匹配字符串的结束字符位置S。

  6. 创建一个CKEDITOR.dom.range对象并将其定位SN为起点和EN终点 ( startContainer/ startOffset/ endContainer/ endOffset)。

  7. 用于CKEDITOR.dom.selection.selectRanges()从上一步中选择范围。

于 2014-01-21T07:35:35.177 回答
0

我想知道你为什么不使用 unhighlight 命令的“反向”正则表达式？

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

它应该工作正常！

于 2014-01-21T14:24:41.443 回答