Open GGuru opened 8 years ago
Someone please look into this.. here is the code that uses insertNode() to add a span tag markup into the editor and makes the span node contenteditable=false. @pulges, any insights pls..
var composer = this.editor.composer,
domWrapper = document.createDocumentFragment(),
suggestionSpan = $(document.createElement('span'));
suggestionSpan.text($target.text());
suggestionSpan.attr({
'id': $target.data('id'),
'class': SUGGESTION_ITEM_CLASS
});
if(!this.editor.isEmpty()) {
domWrapper.appendChild(document.createTextNode('\u00A0'));
}
domWrapper.appendChild(suggestionSpan[0]);
domWrapper.appendChild(document.createTextNode('\u00A0'));
// this.editorBookmark is bookmark reference stored on blur of the editor
composer.selection.setBookmark(this.editorBookmark);
composer.selection.insertNode(domWrapper);
suggestionSpan.attr('contenteditable', 'false');
// Sets the caret to the end of the node inserted
composer.selection.setAfter(suggestionSpan[0]);
Hi @GGuru, I can suggest only to debug value of editorBookmark
, may be it is set to 0 in FF. I might have similar issue, but can't remember right now in which cases getBookmark
returned 0 instead of correct bookmark. But as far as I remember on a moment when blur happens in FF selection range is not set to the contenteditable node.
@b1ff - Yes that is the issue. the bookmark is 0 for FF and safari. Don't know what it is in IE as I haven't tested there. The code above is invoked on click of a p node on the page. I changed that to button and it works fine..
So, This is my concluded observation.. insertNode inserts a node at the caret position if the action is invoked from a button or link tag.
I am getting and setting the caret position before inserting as below.. but insertNode method is always inserts it it at the end.
var editorBookmark = composer.selection.getBookmark(); composer.selection.setBookmark(editorBookmark);
Does this work for anyone? please suggest.