Question

我正在制作一个小的javascript编辑器（用于chrome扩展），有点像SO上的那个。

有一个工具栏可以处理textarea中的文本。（例如，用一些模板包围所选文本）

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

Answer 1

您可以模拟textInput事件来操纵textarea的内容。我认为（我知道它们在Safari中）

是按照这种方式进行的更改

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 Editing API spec。）Chrome 18支持此功能，但我不确定它的确切版本。

Answer 3

这是一个也可以在Firefox中使用的解决方案（但没有撤消功能）

// Solution
function insertText(textarea, text) {
	// https://stackoverflow.com/a/55174550/288906
	if (!document.execCommand('insertText', false, text)) {
		textarea.setRangeText(text);
	}
}

// Demo code to add text on click
const textarea = document.querySelector('textarea');
textarea.onclick = () => insertText(
  textarea,
  '@'
);

<textarea>Click in here to add text</textarea>

Javascript textarea撤消重做

3 个答案: