Question

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

我已经实现了一个版本，我用一个span替换正则表达式匹配的mustaches，然后是捕获组。当我测试时，这似乎会破坏一些模板。

要删除突出显示，我使用的是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();
            }
        });

谢谢！

Answer 1

以下方法在过去对我来说是一项类似的任务：

遍历CKEditor文档的DOM树，并将所有text nodes合并为一个字符串（让我们称之为S）。使用CKEDITOR.dom.walker，this answer应该有帮助。在遍历树时，构建一组数据结构（让我们称之为C）来存储每个文本节点对象及其文本在S内开始的位置。
针对S运行正则表达式。
如果未找到匹配项，请停止。
否则，使用C集合，找到 start 文本节点（让我们称之为SN），并在其中进行偏移，对应在S内开始匹配字符串的字符位置。
使用C集合，找到 end 文本节点（让我们称之为EN），并在其中对应 end < / em> S内匹配字符串的字符位置。

创建CKEDITOR.dom.range对象，并使用SN作为开头，EN作为结尾（startContainer / startOffset / {{ 1}} / endContainer）。

使用CKEDITOR.dom.selection.selectRanges()选择上一步的范围。

Answer 2

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

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

它应该可以正常工作！

如何突出显示与CKeditor中的正则表达式匹配的元素？

2 个答案: