Làm cách nào để đánh dấu các yếu tố khớp với regex trong CKeditor?

Question

Tôi muốn có thể làm nổi bật (tức là bọc trong một khoảng có màu hoặc cách khác) tất cả văn bản khớp với regex trong CKEditor. Tôi có thể thêm một nút để làm điều này, và một nút để loại bỏ làm nổi bật. Trường hợp sử dụng cụ thể của tôi là để làm nổi bật tất cả các biến ria mép trong các mẫu HTML của tôi (làm cho nó thực sự dễ dàng để xem nơi có các biến ria mép).

Tôi đã triển khai phiên bản mà tôi thay thế một ria phù hợp với regex bằng một khoảng và sau đó là nhóm chụp. Điều này dường như phá vỡ một số mẫu khi tôi kiểm tra.

Để xóa đánh dấu, tôi sử dụng editor.removeStyle, điều này dường như không hoạt động trong mọi trường hợp.

Dưới đây là một ví dụ về những gì tôi đã thực hiện:

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

Cảm ơn!

Answer 1

Các phương pháp sau đây làm việc cho tôi trong quá khứ cho một nhiệm vụ tương tự:

1. Walk cây DOM của tài liệu ckeditor và kết hợp tất cả text nodes thành một chuỗi duy nhất (chúng ta hãy gọi nó S). Sử dụng CKEDITOR.dom.walker cho điều đó, this answer sẽ trợ giúp tại đây. Trong khi đi bộ trên cây, hãy xây dựng một tập hợp các cấu trúc dữ liệu (hãy gọi nó là C) để lưu trữ từng đối tượng nút văn bản và vị trí của văn bản bắt đầu trong phạm vi S.

2. Chạy regex của bạn theo số S.

3. Nếu không tìm thấy kết quả phù hợp, hãy dừng lại.

4. Nếu không, sử dụng C thu thập, xác định vị trí bắt đầu nút văn bản (chúng ta hãy gọi nó SN), và bù đắp bên trong nó, tương ứng với bắt đầu vị trí ký tự của chuỗi trận đấu bên S.

5. Sử dụng C thu thập, xác định vị trí cuối nút văn bản (chúng ta hãy gọi nó EN), và bù đắp bên trong nó, tương ứng với cuối vị trí ký tự của chuỗi trận đấu bên S.

6. Tạo một đối tượng CKEDITOR.dom.range và vị trí của nó sử dụng SN như bắt đầu và EN như cuối (startContainer/startOffset/endContainer/endOffset).

7. Sử dụng CKEDITOR.dom.selection.selectRanges() để chọn phạm vi từ bước trước đó.

Answer 2

Tôi tự hỏi tại sao bạn không sử dụng lệnh "đảo ngược" Regex của lệnh 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); 
     } 
    }); 

Nó sẽ hoạt động tốt!