CKEditor cursor position after inserting uneditable element

Question

I'm having trouble in developing CKEditor plugins that insert uneditable contents into the text flow. I've been trying to utilize the range functions, but with little success as the documentation is less than stellar. So, given some text, lets say the plugin inserts "[[uneditable stuff]]" and then upon WYSIWYG display wraps that in a span so it can be styled in a color:

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

When first inserting the uneditable stuff, we want the user to then be able to continue on typing or hitting Enter for a new line. The following code (which I got here: How to set cursor position to end of text in CKEditor?) works in Firefox but (naturally) not in IE9, 8, or 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

So what I want to happen is that the cursor goes at position "^":

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

If the new element is not at the end of the line, then after creating it, the cursor should go to here:

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

In FF, I can get the cursor at the end of the line though not at position after the new element. In IE, the cursor is still inside the new SPAN, which I see when I type and it is still in the span's css color, and when switching to SOURCE view, the text is gone (because it's an uneditable span).

I know there's a range.setStartAfter method, but have been totally unable to make it work even in FF/Chrome.

Does anybody have a really good handle on using range and selection methods in CKEditor? I know I don't!

Starting to think that just using editor.insertElement is wrong, and I should learn about the FakeElement (insertBogus?) functions, which I don't understand, yet. Stock plugins for such as links and images don't seem to have this problem.

Answer 1

I had to do some sneaky stuff to solve this, but it did get solved: After creating the non-editable item (a span with attribute content-editable: false) I had to create a "dummy" span with text consisting of one space. So, I insert the real span, then the dummy. But only when creating a new item.

So this goes in the "if not dealing with editing a selected item" section. Here, 'a' is the editor instance, 'e' is the desired non-editable item, 'f' is the dummy span.

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

I have to admit that I don't entirely understand my own code. I got there through hours of trial and error. Oh, and I had to add an htmlFilter Rule to get rid of left-over 'f' elements:

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

I also have to add that I don't remember why I had to replace "nbsp" entities before deleting the span. But it works. And I don't know why to delete you use "s.name" instead of just 's'.

Hope that helps someone.

Answer 2

I faced the same issue and I was able to have cursor before and after my uneditable content(SVG element) by wrapping my SVG element in <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.

This worked fine for me, now I am able get curesor in the beginning and end at the end on SVG element.

Answer 3

I had similar issue with pasting image directly into editor, image became selected, and I didn't want it to be selected, so I had to deselect image and put cursor right after image:

CKEditorObject.on('afterInsertHtml', function (e) {
    setTimeout(function () {
        var range = e.editor.getSelection().getRanges()[0];
        range.collapse();
        e.editor.getSelection().selectRanges( [ range ] );
    }, 1);
});