Vị trí con trỏ chuột CKEditor sau khi chèn phần tử không thể chỉnh sửa

Question

Tôi gặp sự cố khi phát triển các plugin CKEditor chèn nội dung không thể chỉnh sửa vào luồng văn bản. Tôi đã cố gắng sử dụng các chức năng phạm vi, nhưng với rất ít thành công vì tài liệu ít hơn sao. Vì vậy, đưa ra một số văn bản, cho phép nói chèn plugin "[[thứ không thể chỉnh sửa]]" và sau đó khi hiển thị WYSIWYG kết thúc tốt đẹp đó trong một khoảng để nó có thể được theo kiểu trong một màu:

<p>This is some text[[uneditable stuff here]]</p>

chèn Khi lần đầu tiên những thứ không thể chỉnh sửa, chúng tôi muốn người dùng có thể tiếp tục nhập hoặc nhấn Enter cho một dòng mới. Các mã sau đây (mà tôi có ở đây: How to set cursor position to end of text in CKEditor?) hoạt động trong Firefox nhưng (tự nhiên) không trong IE9, 8, hoặc 7:

var s = editor.getSelection(); 
editor.insertElement(e); // element 'e'= a span created earlier 
var p = e.getParent(); 
s.selectElement(p); 
var selected_ranges = s.getRanges(); 
selected_ranges[0].collapse(false); // false = to the end of the selected node 
s.selectRanges(selected_ranges); // putting the current selection there 

Vì vậy, những gì tôi muốn xảy ra là con trỏ đi ở vị trí "^" :

<p>This is some text<span>[[uneditable stuff here]]</span>^</p>

Nếu các yếu tố mới không phải là ở phần cuối của dòng, sau đó sau khi tạo nó, con trỏ nên đến đây:

<p>This is some text<span>[[uneditable stuff here]]</span>^ with more text after the new element</p>

Trong FF, tôi có thể lấy con trỏ ở cuối dòng mặc dù không ở vị trí sau phần tử mới. Trong IE, con trỏ vẫn nằm trong SPAN mới, mà tôi thấy khi tôi gõ và nó vẫn còn trong màu css của span, và khi chuyển sang dạng SOURCE, văn bản đã biến mất (vì nó là một khoảng không thể chỉnh sửa).

Tôi biết có phương thức range.setStartAfter, nhưng hoàn toàn không thể làm cho nó hoạt động ngay cả trong FF/Chrome.

Có ai có xử lý thực sự tốt về việc sử dụng các phương pháp lựa chọn và phạm vi trong CKEditor không? Tôi biết Tôi không!

Bắt đầu nghĩ rằng chỉ cần sử dụng editor.insertElement là sai và tôi nên tìm hiểu về các hàm FakeElement (insertBogus?) Mà tôi chưa hiểu. Các plugin cổ phiếu chẳng hạn như các liên kết và hình ảnh dường như không có vấn đề này.

Answer 1

Tôi phải làm một số thứ lén lút để giải quyết vấn đề này, nhưng nó đã được giải quyết: Sau khi tạo mục không thể chỉnh sửa (một khoảng có thuộc tính có thể chỉnh sửa: sai) Tôi phải tạo một khoảng giả "" với văn bản bao gồm một không gian. Vì vậy, tôi chèn khoảng thời gian thực, sau đó là giả. Nhưng chỉ khi tạo một mục mới.

Vì vậy, điều này sẽ nằm trong phần "nếu không xử lý việc chỉnh sửa mục đã chọn". Ở đây, 'a' là trường hợp trình soạn thảo, 'e' là mục không thể chỉnh sửa mong muốn, 'f' là khoảng giả.

var e=new CKEDITOR.dom.element('span',a.document); 
e.setAttributes({// stuff to create our element}); 
var f=new CKEDITOR.dom.element('span',a.document); 
f.setAttributes({ 
    'class':'dummyF' 
}); 
f.setText(' '); // that's just one space 

// after section dealing with editing a selected item, in "else": 
var sel = a.getSelection(); // current cursor position 
a.insertElement(e); // the real new element 
if(CKEDITOR.env.ie || CKEDITOR.env.webkit){ // IE & Chrome like this way 
    f.insertAfter(e); 
    sel.selectElement(f); 
} 
else { //FF likes this way (to ensure cursor stays in the right place) 
    f.insertAfter(e); 
    var rangeObjForSelection = new CKEDITOR.dom.range(a.document); 
    rangeObjForSelection.selectNodeContents(f); 
    a.getSelection().selectRanges([ rangeObjForSelection ]); 
} 

Tôi phải thừa nhận rằng tôi không hoàn toàn hiểu mã của riêng mình. Tôi đã đến đó qua nhiều giờ thử và sai. Oh, và tôi đã thêm một Rule htmlFilter để thoát khỏi trái qua 'f' yếu tố:

e.addRules({ 
    // e is the htmlFilter: applied to editor data before/upon output 
    elements:{ 
    span:function(s){ // 's' is any spans found in the editor 
     if(s.attributes&&s.attributes['data-cke-myelement']) { 
      //stuff to do with my element 
     } 
     else if(s.attributes['class']=='dummyF') { //CKEDITOR.env.ie&& 
      // for dummy spans to deal with "can't type or hit enter after new element" problem 
      realtext = new String(s.children[0]['value']); 
      realtext.replace(/^ /,''); 
      s.children[0]['value'] = realtext; 
      delete s.name; 
     } 
    } 
    } 
}); 

Tôi cũng phải nói thêm rằng tôi không nhớ tại sao tôi đã phải thay thế "nbsp" thực thể trước xóa khoảng. Nhưng nó đã có tác dụng. Và tôi không biết tại sao bạn xóa "s.name" thay vì chỉ là 's'.

Hy vọng rằng sẽ giúp ai đó.

Answer 2

tôi phải đối mặt với cùng một vấn đề và tôi đã có thể có con trỏ trước và sau khi nội dung không thể chỉnh sửa của tôi (SVG phần tử) bằng cách quấn yếu tố SVG của tôi trong <span>&#8203; + element + &#8203;</span>

const eHtml = '<span>&#8203; ' + svgHtml + '&#8203;</span>'; // Wrap element in a span with sorrounding &#8203; 
const wrpEl = CKEDITOR.dom.element.createFromHtml(eHtml); 
editor.insertElement(wrpEl); 
wrpEl.remove(true); // Remove wrapping span leaving children. 

này làm việc tốt cho tôi, bây giờ tôi có thể nhận curesor trong phần đầu và cuối ở phần cuối của phần tử SVG.