CKeditorの正規表現と一致する要素をどのように強調表示できますか？

Question

CKEditorの正規表現に一致するすべてのテキストをハイライト（つまり、色でスパンをラップするなど）することができます。私はおそらく、これを行うためのボタンとハイライトを削除するボタンを追加するだろう。私の具体的なユースケースは、HTMLテンプレート内のすべてのひげ剃り変数を強調表示することです（本当に口ひげ変数がある場所を確認するのが簡単です）。

正規表現マッチをスパンと置き換えてキャプチャグループに置き換えたバージョンを実装しました。これは、私がテストするときにいくつかのテンプレートを壊すように見えます。

ハイライトを削除するには、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それを呼びましょう）単一の文字列にすべてのtext nodesを兼ね備えています。そのためにCKEDITOR.dom.walkerを使用してください。ここではthis answerが役に立ちます。ツリーを歩いている間に、各テキストノードオブジェクトとそのテキストの開始位置を格納するデータ構造の集合（Cと呼ぶ）をS内に作成します。

2. Sに対して正規表現を実行してください。

3. 一致するものが見つからない場合は停止します。

4. そうでない場合は、Cコレクションを使用して、開始テキストノードを見つけ、S内部の一致文字列の開始文字位置に対応し、その内のオフセット（のはそれSNを呼びましょう）。

5. Cコレクションを使用して、エンドテキストノードを見つけ、S内部の一致文字列の末尾文字位置に対応し、その内のオフセット（のはそれENを呼びましょう）。

6. はCKEDITOR.dom.rangeオブジェクトを作成し、終了（startContainer/startOffset/endContainer/endOffset）として開始とSNとENを使用して位置付けます。

7. CKEDITOR.dom.selection.selectRanges()を使用して前の手順の範囲を選択します。

Answer 2

"逆" Regex ofr 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); 
     } 
    }); 

正常に動作するはずです。