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

我希望能够使用CKEditor中的正则表达式来突出显示所有与正则表达式匹配的文本（即用一种颜色或其他方式包装跨度）。我可能会添加一个按钮来做到这一点，一个按钮来删除突出显示。我的具体用例是突出显示我的HTML模板中的所有胡子变量（可以很容易地看出哪里有胡须变量）。如何突出显示与CKeditor中的正则表达式匹配的元素？

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

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

谢谢！

来源

2013-09-10 gsastry

我几乎有同样的问题。我需要能够在键入CKeditor期间突出显示匹配正则表达式的内容。 – Polygnome

“当我测试时，这似乎在某些模板上会中断。” - 它如何中断？你也可以在你的问题中包含一个示例模板，以便可以复制问题吗？同样，“我使用editor.removeStyle，它似乎在所有情况下都不起作用” - 您能举一个它不起作用的例子吗？ –

gsastry和@Polygnome现在你最喜欢的解决方案是什么，你有没有一个例子呢？因为我有类似的需要尊重开始和结束占位符标记“{”和“}”。 – melutovich

以下办法为我工作在过去的一个类似的任务：

走在CKEditor的文档的DOM树，将所有text nodes成一个字符串（姑且称之为S）。因此，使用CKEDITOR.dom.walker，this answer应该在这里帮助。在树中行走时，构建一组数据结构（我们称之为C），以便在S之内存储每个文本节点对象以及文本的起始位置。
对S运行您的正则表达式。
如果找不到匹配，请停止。
否则，使用C收藏，找到开始文本节点（姑且称之为SN），并在它的偏移，对应于内S匹配字符串的开始字符位置。
使用C收集，找到年底文本节点（姑且称之为EN），并在它的偏移，对应于内S匹配字符串的结束性格位置。
创建CKEDITOR.dom.range对象并使用SN作为开始和EN作为结束（startContainer/startOffset/endContainer/endOffset）定位。使用CKEDITOR.dom.selection.selectRanges()来选择上一步的范围。

来源

2014-01-21 07:35:35 Noseratio

这似乎是一个很好的解决方法。我检查了明天;） – Polygnome

@Polygnome，它适用于破碎情况下，像'兄弟肯'（'broken'），但你可能需要考虑其他的标签，如'兄弟肯 '。在走树时检查标签名称，并为除''以外的所有标签添加空格（或其他分隔符）到'S'。 – Noseratio

@Noseratio我有类似的需要尊重开始和结束占位符标记“{”和“}”，这仍然是你的首选方法？你有什么样的用法？ – melutovich

我想知道为什么不使用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-21 14:24:41

这没有解决分段问题，比如' bro ken'''broken'。 – Noseratio

是的，但是对于他自己的用例，它应该可以工作。你明白我的意思吗？ –

我没有，但也许OP和@Polygnome看到了。 – Noseratio

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

回答

相关问题