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

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

以下方法过去对我来说适用于类似的任务：

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/// ) 。startOffsetendContainerendOffset

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