[英]How to change the caret offset in a rich text editor textarea?
我有一个wysihtml RTF编辑器。 如果满足某些条件,我想更改插入符号的偏移量。
因为wysithtml textarea实际上不是textarea
div(它只是常规div),所以我不能使用常见的textarea策略来移动插入符号。 但是经过一番实验,我发现将其视为“ 选择”使我能够将其作为文本区域使用。
从我看过的更改插入号偏移量的正确方法是Range.setStart() ,但是我不知道如何使用它。 谁能帮助我?
我已经设置了这个jsfiddle 。 尝试(在Firefox中)将插入符号移动到偏移量27。然后,编辑器的值将更改,插入符号将移动到偏移量0。但是如何将插入符号移动到例如偏移量35?
我已将您的小提琴更新为您想要的工作方式。
这是我修改的部分:
if (offsets.start_offset == 27) {
editor.setValue("This is first line.<br>This is another second line.", true);
/* START OF MODIFICATION */
var range = window.getSelection().getRangeAt(0);
range.selectNodeContents(textarea);
var fromPos = 27;
var lenTotal = ( textarea.textContent || textarea.innerText ).length;
var lenCurTextNode = range.endContainer.lastChild.nodeValue.length;
var lenNewWord= 'another '.length ;
var newPos = ( fromPos - (lenTotal - lenCurTextNode) ) + lenNewWord;
range.setStart(range.startContainer.lastChild , newPos);
range.setEnd(range.endContainer.lastChild , newPos);
/* END OF MODIFICATION */
var offsets = getOffsets(textarea);
console.log("I want offsets.start_offset to be 35, but it is " + offsets.start_offset)
} else {
console.log("Offset is from " + offsets.start_offset + " to " + offsets.end_offset );
}
您必须处理textNode
才能创建一系列文本字符,而不必使用HTMLElement。 为此,您的Range.setStart()
无效,它正在“调整” div的范围!
在示例textarea中是一个div,您需要在其中查找每个textNode并与其进行交互。
在上面的代码中range.endContainer.lastChild
是一个textNode (实际上是textarea的lastChild) 。
希望这个能对您有所帮助 !
经过Firefox测试
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.