如何在不弄乱编辑历史的情况下使用JavaScript将文本插入文本区域? [英] How to insert text into a textarea using JavaScript without messing up edit history?
问题描述
基本上我想要的是，如果用户在文本区域中选择了一些文本，然后按ctrl + b，则所选内容中的文本应被星号包围.
Basically what i want is if a user selects some text in a textarea and presses ctrl + b then the text within the selection should be surrounded by stars.
所以基本上我想要的是:
so basically what I want is :
1)textarea内容:您好，这是一些文本"
1) textarea content : "hello this is some text"
2)用户选择一些文本，然后按ctrl + b您好是一些文本"(假设加粗部分是文本选择)
2) user selects some text and presses ctrl + b "hello this is some text" (assume the bolded part is a text selection)
3)所以我希望textarea内容为:你好，这是一些文字"
3) so I want the textarea content to be : "hello this *is some* text"
4)，如果用户按ctrl + z(或其他撤消操作)，textarea的内容应该回到你好，这是一些文字"
4) and if the user presses ctrl + z(or whatever the undo action) the textarea content should go back to being "hello this is some text"
我已经尝试过我该如何使用javascript将文本插入到textarea中?和插入文本到光标位置处的textarea(Javascript)等类似的问题，但是问题是，对于大多数浏览器，在执行撤消(ctrl + z)时，我希望文本返回到步骤1中的值.但这不会发生.我了解stackoverflow在其编辑器中实现了自己的撤消重做功能.但是我希望不要那么复杂.必须支持chrome和safari
I have tried How can i use javascript to insert text into a textarea? and Insert text into textarea at cursor position (Javascript) and similar but the issue is that on doing undo (ctrl + z) for most browsers I expect the text to go back to go to the value in step 1. but this does not happen. I understand stackoverflow implements own undo redo functionality in its editor. but I was hoping not to go to that much complexity. Have to support chrome and safari
我正在考虑的一种方法是放置光标并发出合成键事件.我不知道它是否可以工作，并且是否没有问题
An approach I am thinking about would be to position the cursor and issue a synthetic key event. I don't know if it will work and if it would be free of issues
推荐答案
更新的版本
要在更改文本区域的整体值时保存用户历史记录，而不是:
Updated Version
To save user history when changing a textarea's overall value, instead of:
textarea.value = newText;
使用:
textarea.focus();
document.execCommand('selectAll',false);
var el = document.createElement('p');
el.innerText = newText;
document.execCommand('insertHTML',false,el.innerHTML);
在我的中端游戏平台上，它的字符串大约是4,000个字符，大约需要〜1秒，因此您必须弄清楚这是否适合您的用例.
It takes about ~1 second on my mid-end gaming rig with a string a little over 4,000 characters, so you'll have to figure out if that's acceptable for your use case.
也许您对 execCommand 很熟悉，并且想知道为什么我们不只是使用它:
Maybe you're familiar with execCommand and wonder why we don't just use this:
textarea.focus();
document.execCommand('selectAll',false);
document.execCommand('insertText',false,newText);
在Chromium上， insertText 极其慢速度慢，尤其是对于较长的字符串.例如超过4,000个字符，在我的中级游戏中，与更新版本"中使用的字符串相同的字符串需要〜10秒.
On Chromium insertText is extremely slow, especially for longer strings. For an example over 4,000 characters, on my mid-gaming compy the same string as used in the Updated Version takes ~10 seconds.
它确实也保存了用户历史记录，并且在历史记录状态之间移动仍然是可以接受的速度(〜0.5秒).
It does save user history too though, and moving between history states is still an acceptable speed (~0.5 seconds).
这样做是否较慢，是否有意义，因为无论如何我都会假设我在更新版本Chromium的后台显式执行的操作?不.但是，我猜这就是今天的Chromium.如果旧版本变得更好，请在下面发表评论.
Does it make sense that this is slower, since I would assume what I'm doing explicitly in the Updated Version Chromium's doing in the background anyway? No. But this is where Chromium's at today, I guess. Comment below if the Old Version becomes better.
不幸的是， execCommand 在Firefox的textarea元素中不起作用.在以后的版本中可能会解决.
Unfortunately, execCommand doesn't work inside of textarea elements in Firefox. This may be fixed in an upcoming version.
在Chromium和Firefox中进行了测试.
Tested in Chromium and Firefox.
如果我找到了更快的解决方案(和/或在Firefox中可以使用的解决方案)，我一定会分享它.
If I find a still faster solution (and/or one that works in Firefox), I will definitely share it.
这篇关于如何在不弄乱编辑历史的情况下使用JavaScript将文本插入文本区域?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
