Я новичок в contenteditable-материалах и пытаюсь написать что-то вроде WYSIWYG-редактора с пользовательскими правилами форматирования и синтаксического анализа. Я использую contenteditable = true - div и теперь пытаюсь отформатировать его при вводе, сохраняя позицию каретки. Это мой карет-реставратор на основе этого ответа :
class FlexCaret {
constructor(context) {
var selection = window.getSelection();
var range = selection.getRangeAt(0);
range.setStart( context, 0 );
var len = range.toString().length;
console.log(len);
var that = this;
return function restore(){
var pos = that.ResolveNodeAt(context, len);
selection.removeAllRanges();
var range = new Range();
range.setStart(pos.node ,pos.position);
selection.addRange(range);
}
}
ResolveNodeAt(root, index){
var lastNode = null;
var treeWalker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT,function next(elem) {
if(index > elem.textContent.length){
index -= elem.textContent.length;
lastNode = elem;
return NodeFilter.FILTER_REJECT
}
return NodeFilter.FILTER_ACCEPT;
});
var c = treeWalker.nextNode();
return {
node: c? c: root,
position: c? index: 0
};
}
}
Теперь я пытаюсь использовать его так:
$("#evp-new-input").on("input", function(e){
var car = new FlexCaret(this),
parsedText = nodeParser($(this).html());
$(this).html(parsedText);
car();
})
каретка продолжает переходить к последней строке, содержащей текст, в противном случае к самой первой строки, но НИКОГДА на новой строке я только что вставил. Это действительно мешает мне работать и снижает удобство использования этого LOT.
Я действительно надеюсь, что у кого-то есть идея, как это исправить!
С уважением,
thelaumix