CKEditorは単一の要素として選択します

Question

CKEditor編集可能なdivの要素をマウスの選択のための入力のように扱うことができます。要素はspanですが、ユーザーがコンテンツの一部をコンテンツの外に選択できないようにしたいと考えています。それは、次のDOMがある場合たとえば、：

Foo <span>gobbledigook</span> bar 

をユーザーが「フー」または「バー」内、スパン内に選択することができるはず、または「フー」から始まり、「バー」内に延び、スパンの内容に「Foo」から選択することはできません。これらの目的のために、<span>は<input />のように扱われなければなりません（その動作についてはthis jsbinを参照してください）。

スパンは実際にはCKEditorのwidgetプラグインを使用していますが、これは他の方向を満たすように見えます（つまり、スパン内で選択できますが、スパン内からスパン外にドラッグしても、 ）。それはちょうど外 - >内部で働いていない。私は選択が、それはで起動しなかったウィジェット以内に終了していることを検出した場合

editor.widgets.on("checkSelection", function(event) { 
     var range = editor.getSelection().getRanges()[0]; 

     var start = range.startContainer; 
     var end = range.endContainer; 

     // widgetRepository.getByElement() chokes if the argument is a text node 
     if (start.type === CKEditor.NODE_TEXT) { 
      start = start.getParent(); 
     } 

     if (end.type === CKEditor.NODE_TEXT) { 
      end = end.getParent(); 
     } 

     var endWidget = editor.widgets.getByElement(end); 

     if (
      // We only worry about selecting from outside of a widget to the inside of one 
      endWidget 
      // Selection ends inside a widget and the start is not in a widget *or* is within a different widget 
      && editor.widgets.getByElement(start) !== endWidget 
     ) { 
      range.setEndBefore(endWidget.wrapper); 
      range.select(); 
     } 
    }); 

基本的に、私はウィジェットラッパーの前に右に終止符を移動：

Answer 1

私はこのための回避策を持っています。