編集不可能な要素を挿入した後のCKEditorカーソル位置

Question

編集不可能な内容をテキストフローに挿入するCKEditorプラグインの開発に問題があります。私は範囲関数を利用しようとしてきましたが、ドキュメンテーションが恒星ではないのでほとんど成功しませんでした。だから、いくつかのテキストを与えられた、プラグインのインサートを言うことができます「[[編集不可のものが]]」とし、WY​​SIWYG表示時にスパンでそれがカラーでスタイリングできるようにすることをラップ：

<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で範囲と選択方法を使用する上で本当に良いハンドルを持っていますか？私は知っている私はしないでください！

editor.insertElementを使っているだけで間違っていると思うようになり、私は理解していないFakeElement（insertBogus？）関数について学ぶ必要があります。リンクや画像などのストックプラグインにはこの問題がないようです。

Answer 1

私はこの問題を解決するために、いくつかの卑劣なものをしなければならなかったが、それは解決しますでした：非編集可能な項目（属性のコンテンツ編集可能とスパン：false）を作成した後、私はテキストで「ダミー」スパンを作成する必要がありました1つのスペースで構成されています。だから、私は本物のスパンを挿入し、次にダミーを挿入します。しかし、新しいアイテムを作成するときだけです。

これは、「選択したアイテムを編集していない場合」セクションにあります。ここで、 '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 ]); 
} 

私は自分のコードを完全に理解していないことを認めなければなりません。私は数時間の試行錯誤を経てそこに着いた。ああ、私は左オーバー「f」の要素を取り除くために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"の代わりに "s.name"を使うのかを知らない。

誰かを助ける希望。

Answer 2

私は同じ問題に直面し、私はこれが今私ができる午前、私のためにうまく働いた<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. 

で私のSVG要素をラップすることによって、私の編集不可のコンテンツ（SVG要素）の前と後にカーソルを持ってすることができました最初はcureorを取得し、SVG要素の最後で終了します。