Come posso evidenziare elementi che corrispondono a un'espressione regolare in CKeditor?

Question

Voglio essere in grado di evidenziare (cioè avvolgere in un intervallo con un colore, o in un altro modo) tutto il testo che corrisponde a un'espressione regolare in CKEditor. Probabilmente aggiungerei un pulsante per farlo e un pulsante per rimuovere l'evidenziazione. Il mio caso d'uso specifico è quello di evidenziare tutte le variabili dei baffi nei miei modelli HTML (rendere molto facile vedere dove ci sono le variabili dei baffi).

Ho implementato una versione in cui sostituisco i baffi di regex con uno span e quindi il gruppo di cattura. Sembra che si rompa su alcuni modelli quando eseguo il test.

Per rimuovere l'evidenziazione, utilizzo editor.removeStyle, che non sembra funzionare in tutti i casi.

Ecco un esempio di quello che ho implementato:

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

Grazie!

Answer 1

Il seguente approccio ha funzionato per me in passato per un compito simile:

1. A piedi l'albero del DOM del documento CKEditor e combinare tutti text nodes in una singola stringa (chiamiamolo S). Utilizzare CKEDITOR.dom.walker per quello, this answer dovrebbe aiutare qui. Mentre si cammina l'albero, creare una raccolta di strutture di dati (chiamiamolo C) per memorizzare ciascun oggetto nodo di testo e la posizione in cui inizia il suo testo all'interno di S.

2. Esegui il tuo regex contro S.

3. Se la partita non viene trovata, fermarsi.

4. Altrimenti, utilizzando C raccolta, individuare il nodo inizio testo (che chiameremo SN), e sfalsati all'interno di esso, corrispondente alla posizione di partenza carattere della stringa partita all'interno S.

5. Utilizzando C raccolta, individuare il nodo fine testo (che chiameremo EN), e sfalsati all'interno di esso, corrispondente alla posizione di fine carattere della stringa partita all'interno S.

6. Creare un oggetto CKEDITOR.dom.range e posizionarlo secondo SN come l'inizio e la fine EN come (startContainer/startOffset/endContainer/endOffset).

7. Utilizzare CKEDITOR.dom.selection.selectRanges() per selezionare l'intervallo dal passaggio precedente.

Answer 2

Mi chiedo perché non si utilizza un Regex "reverse" del comando 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); 
     } 
    }); 

Dovrebbe funzionare correttamente!