当前位置：文江博客话题详情

Javascript 文本区域撤消重做

发布于 2024-12-06 06:39:24 字数 175 浏览 1 评论 0原文

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

有一个用于操作文本区域中的文本的工具栏。（例如用一些模板包围选定的文本）

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

悲凉≈ 2024-12-13 06:39:24

如果文本区域具有焦点并且其插入符位于正确的位置，

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

将插入文本“要插入的文本”，保留浏览器的本机撤消堆栈。（请参阅正在进行的工作HTML 编辑 API 规范 .）Chrome 18 支持此功能，但我不确定它引入的确切版本。

If the textarea has focus and its caret is at the correct position,

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

will insert the text "the text to insert", preserving the browser's native undo stack. (See the work in progress HTML Editing API spec.) Chrome 18 supports this, but I'm unsure of the exact version it was introduced.

回复收藏 0 原文

愚人国度 2024-12-13 06:39:24

您可以模拟 textInput 事件来操作文本区域的内容。我认为，以这种方式所做的更改会受到撤消/重做的尊重（我知道它们在 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

基本上，文本的插入就像您自己粘贴一样。因此，如果选择了某些内容，它将被文本替换。如果没有选择，文本将插入到插入符号的位置。撤消/重做应该正常工作（一次性撤消/重做整个插入的字符串），因为浏览器的行为就像您自己键入/粘贴一样。

正如我所说，我知道这就像 Safari 中撤消/重做的魅力一样，所以我认为它也适用于 Chrome。

You can probably simulate textInput events to manipulate the contents of the textarea. The changes made that way are respected by undo/redo, I think (I know they are in 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

Basically, the text is inserted as though you pasted it yourself. So if something is selected, it'll be be replaced with the text. If there's no selection, the text will be inserted at the caret's position. And undo/redo should work normally (undoing/redoing the entire inserted string in one go), because the browser acts as if you typed/pasted it yourself.

As I said, I know this works like a charm with undo/redo in Safari, so I'd assume it works in Chrome as well.

回复收藏 0 原文

~没有更多了~