Sự cố với thẻ tự đóng tùy chỉnh trong CKEditor

Question

Tôi có plugin để chèn thẻ <cut /> vào văn bản. Nó hoạt động tốt, kết quả là mong đợi, nhưng trong cửa sổ soạn thảo <cut /> biến thành <cut></cut>, kết thúc các đoạn dưới đây và cản trở các chỉnh sửa tiếp theo.

GIF - http://gyazo.com/dd7c36ba7cb7bc7cb00186cfb83e5fbc

Bất kỳ ý tưởng làm thế nào để sửa chữa nó?

CKEDITOR.plugins.add('pagecut', { 
lang: 'de,en,ru', 
onLoad: function(){ 
    var css = ('display:block;clear:both;width:100%;border-top:#999 1px dotted;padding:0;height:1px;cursor:default;'); 
    var cssBefore = (
      'content:"";' + 
      'background: url(' + CKEDITOR.getUrl(this.path + 'images/image.png') + ') no-repeat right center;' + 
      'height:14px;width:25px;position:relative;display:block;top:-8px;float:right;' 
     ); 
    CKEDITOR.addCss('cut{' + css + '} cut:before{' + cssBefore + '}'); 
}, 
init: function(editor) { 
    CKEDITOR.dtd['cut'] = {}; 
    CKEDITOR.dtd.$empty['cut'] = 1; 
    CKEDITOR.dtd.$nonEditable['cut'] = 1; 
    CKEDITOR.dtd.$object['cut'] = 1; 
    editor.addCommand('insertPagecut', { 
     exec: function(editor) { 
      var element = CKEDITOR.dom.element.createFromHtml('<cut />'); 
      editor.insertElement(element); 
     } 
    }); 

    editor.ui.addButton('Pagecut', { 
     label: editor.lang.pagecut.toolbar, 
     command: 'insertPagecut', 
     icon: this.path + 'images/icon.png', 
     toolbar: 'links' 
    }); 
} 
}); 

Answer 1

Uh, tôi chắc chắn rằng tôi giải thích kỹ lưỡng trong một số câu hỏi, nhưng tôi không thể tìm thấy nó, do đó, ở đây đi một lời giải thích: D.

Có hai sự kiện quan trọng mà người ta phải hiểu trước khi cố gắng để chỉnh sửa các thẻ không phải là HTML trong ckeditor:

1. ckeditor là một HTML biên tập.

   Tất nhiên thẻ tùy chỉnh bắt đầu ngày càng phổ biến trong HTML. Bạn cũng có thể nói rằng XML là một dạng tổng quát về HTML (mặc dù không chính xác, bởi vì nó có các quy tắc khác), vì vậy nếu CKEditor xử lý HTML tại sao nó không xử lý các thẻ khác tốt như nhau. Vâng - câu trả lời rất đơn giản - vì thẻ HTML có ý nghĩa và CKEditor biết điều đó. Nhưng nó không biết ý nghĩa của các thẻ tùy chỉnh của bạn. Và ý nghĩa của các thẻ (danh sách là gì, nó có các mục, rằng chúng là các phần tử khối, vv) là rất quan trọng để thực hiện các thuật toán chỉnh sửa.

   Đủ công bằng, bạn có thể nói. Nhưng tại sao cấu hình của CKEditor (ví dụ: đối tượng CKEDITOR.dtd) được khái quát hóa nên ý nghĩa của mỗi thẻ có thể được định cấu hình? Bởi vì mọi sự tổng quát hóa làm tăng sự phức tạp và chỉnh sửa HTML đã đủ phức tạp.

   Vậy tại sao đối tượng CKEDITOR.dtd tồn tại? Bởi vì một số thành phần của CKEditor được cấu hình ở một mức độ nào đó. DTD có tác động lớn nhất trên CKEditor's HTML parser (được sử dụng chủ yếu trong thời gian data processing) vì vậy đây là thành phần cấu hình nhất. Các thuật toán khác, chẳng hạn như nhập xử lý khóa, xóa lùi/xóa, chỉnh sửa danh sách (là một nhiệm vụ rất phức tạp) chỉ có thể cấu hình được một chút và không đảm bảo rằng chúng sẽ hoạt động với thẻ tùy chỉnh của bạn.

2. Việc chỉnh sửa xảy ra trong các trình duyệt và là một phần xử lý bởi các trình duyệt.

   Thực tế này rất quan trọng vì điều đó có nghĩa là khả năng của trình duyệt cũng ảnh hưởng đến giới hạn của CKEditor. Trình duyệt phải có khả năng phân tích và hiển thị các thẻ của bạn (may mắn thay, phần này hoạt động khá tốt trong các trình duyệt hiện đại - IE8 là phiên bản cuối cùng có vấn đề lớn) và phải có khả năng chỉnh sửa. Điều này có nghĩa là - hiển thị dấu mũ, xử lý lựa chọn, xử lý backspace, nhập, v.v. Vì trình duyệt không dễ mở rộng và triển khai của chúng contentEditable rất không nhất quán, không tương thích và lỗi, từ bản phát hành đến bản phát hành CKEditor ghi đè ngày càng nhiều hành vi bản địa. Không phải tất cả (thực tế - nó sẽ không bao giờ ghi đè lên tất cả, bởi vì đó có thể là thảm họa vì lý do nhất định), nhưng một số lượng đáng kể.Ví dụ, tất cả các nhập hành vi quan trọng là tùy chỉnh, trên Webkit và Blink ckeditor xử lý xóa lùi và xóa trong nhiều kịch bản do vẫn lỗi chưa được giải quyết (1 và 2), nó thực hiện nó hệ thống undo riêng, chặn dán và giảm nội dung và thực hiện chèn HTML tùy chỉnh (Tôi nhớ rằng khi chúng tôi triển khai nó, điều này đóng một số lượng lớn vé), v.v.,

   Một trong những nỗ lực lớn nhất để đảm bảo trải nghiệm chỉnh sửa nhất quán, có thể cấu hình và mạnh mẽ là widgets system . Đó là đầy đủ của hack bên trong, nhưng nó cho thấy một sạch sẽ và khá mạnh mẽ API cho các nhà phát triển và một hành vi rất phù hợp cho người dùng cuối. Nó cho phép thực hiện một "đơn vị nội dung phong phú đặc biệt là các nhóm phần tử được coi là một thực thể duy nhất bên trong trình chỉnh sửa". Vì vậy, hệ thống tiện ích có khả năng đóng gói một phần nội dung của bạn và cách ly nó khỏi trình duyệt.

Sau phần giới thiệu ngắn này, tôi cuối cùng có thể trả lời câu hỏi của bạn. Bạn cần triển khai thẻ <cut> làm tiện ích. Bạn đã cấu hình DTD của bạn khá tốt (bạn chỉ quên đặt những yếu tố nào có thể tồn tại và phần tử đó giống như một khối hoặc phần tử nội tuyến), vì vậy trình phân tích cú pháp sẽ chấp nhận nó và xử lý như một thẻ trống. Bây giờ bạn cần phải bọc nó với một widget để cô lập nó để nó không phá vỡ trải nghiệm chỉnh sửa. Điều đó sẽ làm các trick.