Javascript textarea撤消重做

Question

我正在制作一个小的javascript编辑器(用于chrome扩展),有点像SO上的那个.

有一个工具栏可以处理textarea中的文本.(例如用一些模板包围所选文本)

我想知道是否有一种简单的方法来实现这一点,目前在使用系统undo/redo时,它会混淆文本(我认为系统只跟踪编辑之间的增量).

Answer 1

您可以模拟textInput事件来操纵textarea的内容.我认为(我知道他们在Safari中)使用undo/redo来尊重所做的更改

var element = document.getElementById('someTextarea');
var text = 'This text will be inserted in the textarea';
var event = document.createEvent('TextEvent');

event.initTextEvent('textInput', true, true, null, text);
element.dispatchEvent(event); // fire the event on the the textarea

基本上,插入文本就像你自己粘贴一样.因此,如果选择了某些内容,它将被替换为文本.如果没有选择,则文本将插入插入符号的位置.undo/redo应该可以正常工作(一次性撤消/重做整个插入的字符串),因为浏览器就像你自己输入/粘贴一样.

正如我所说,我知道这在Safari中具有撤消/重做的魅力,所以我认为它也适用于Chrome.

Answer 2

如果textarea具有焦点且其插入符号处于正确位置,

document.execCommand("insertText", false, "the text to insert");

将插入文本"要插入的文本",保留浏览器的本机撤消堆栈.(请参阅正在进行的HTML编辑API规范.)Chrome 18支持此功能,但我不确定它的确切版本.