Позиция курсора CKEditor после вставки неотредактируемого элемента

Question

У меня возникли проблемы с разработкой плагинов CKEditor, которые вставляют неизменяемое содержимое в текстовый поток. Я пытался использовать функции диапазона, но с небольшим успехом, поскольку документация меньше звездной. Таким образом, учитывая некоторый текст, позволяет сказать, что плагин вставляет «[[нередактируемы материал]]», а затем на дисплее WYSIWYG обертывания, что в промежутке, так что может быть стилизованной в цвете:

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

При первой вставки неотредактированный материал, мы хотим, чтобы пользователь смог продолжить ввод или нажатие Enter для новой строки. Следующий код (который я получил здесь: How to set cursor position to end of text in CKEditor?) работает в Firefox, но (естественно) не в IE9, 8 или 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 

Так что я хочу, чтобы это произошло, что курсор переходит в положение «^» :

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

Если новый элемент не в конце строки, то после его создания, курсор должен идти сюда:

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

В FF я могу получить курсор в конце строки, но не в позиции после нового элемента. В IE курсор все еще находится внутри нового SPAN, который я вижу при вводе, и он все еще находится в цвете css диапазона, и при переключении на представление SOURCE текст ушел (потому что это неизменный диапазон).

Я знаю, что существует метод range.setStartAfter, но полностью не смог заставить его работать даже в FF/Chrome.

Есть ли у кого-нибудь действительно хорошая ручка в использовании методов выбора диапазона и выбора в CKEditor? Я знаю I не надо!

Считается, что использование редактора.inertElement неверно, и я должен узнать о функциях FakeElement (insertBogus?), Которые я пока не понимаю. Плагины для акций, такие как ссылки и изображения, похоже, не имеют этой проблемы.

Answer 1

Мне пришлось сделать некоторые подлые вещи, чтобы решить эту проблему, но она решена: после создания нередактируемого элемента (span с атрибутом content-editable: false) мне пришлось создать «фиктивный» диапазон с текстом состоящий из одного пространства. Итак, я вставляю реальный пробел, затем манекен. Но только при создании нового элемента.

Так что это происходит в разделе «если не касается редактирования выбранного элемента». Здесь «a» - это экземпляр редактора, «e» - желаемый нередактируемый элемент, «f» - это фиктивный интервал.

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

Должен признать, что я не совсем понимаю свой собственный код. Я попал туда через часы проб и ошибок. О, и я добавить htmlFilter правила, чтобы избавиться от левого над «е» элементами:

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

Я также должен добавить, что я не помню, почему я должен был заменить «NBSP» лицо до удаление диапазона. Но это работает. И я не знаю, почему для удаления вы используете «s.name» вместо «s».

Надежды, которые помогают кому-то.

Answer 2

Я сталкивался с таким же вопросом, и я был в состоянии иметь курсор до и после моего нередактируемого содержания (SVG элементов), обернув мой SVG элемент в <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. 

Это работало отлично для меня, теперь я могу получить curesor в начале и конце в конце на элементе SVG.