我看过很多帖子但是找不到以下两个问题的明确答案,因为看起来标准和浏览器支持一直在不断变化.
根据标准,使用event.clipboardData.setData在'copy'事件处理程序中更改剪贴板是合法的操作吗?
最新版本的Chrome/FF/Safari/IE/Chrome iOS/Android/iPhone是否支持此功能?
谢谢!
在实现基于Web的富文本编辑器时,我读到这document.execCommand对于对HTML文档执行操作很有用(比如选择粗体).但是,我需要一些更好的东西.具体来说,我需要确切地知道在innerHTML中添加或删除了哪些文本,以及在什么位置(作为整个文档的HTML表示的偏移量).
我考虑过使用内置的document.execCommand和DOM4的变异观察器,但execCommand似乎没有完成任务:
此外,根据我的需要,使用变异观察器似乎有点矫枉过正.
我的动机:我正在尝试定期向服务器传输文档更改,而无需重新传输整个文档.我将数据作为HTML表示的插入和删除集合发送.如果有人知道如何从CKEditor中获取此功能(所以我不必从头开始),那么我会永远爱你.
注意:执行文本差异不是一种选择,因为它在非常大的文档上表现不佳.
否则,我并不是害怕尝试写一些这样做的东西.DOM的范围对象提供的方法将处理很多繁重的工作.我也很欣赏有关这种可能性的建议.
有没有办法编辑input或textarea使用javascript 的内容,并使用浏览器的"撤消"命令(例如ctrl-Z)可以撤消该更改?
我试图在选择的值中插入一个字符串,如"Foo {0} bar",如果用户选择了一个范围,则将所选范围插入到字符串中代替"{0} ".
例如,如果textarea包含"Example 1 2 3"并且光标位于"Example 1 | 2 3",那么该函数会将值更改为"Example 1Foo blah bar 2 3"(valueIfNothingSelected在这种情况下为"blah") .如果选择范围"1 2",则函数将改为将值更改为"示例Foo 1 2 bar 3".
在Chrome中,我测试了这个功能,并且它完成了它应该做的事情,但我无法扭转这一变化undo.
function insertTextAtCursor(text, valueIfNothingSelected) {
var field = $('textarea[name="task_log_description"]')[0];
var startPos = field.selectionStart;
var endPos = field.selectionEnd;
var processedText;
if (startPos == endPos) {
processedText = text.replace('{0}', valueIfNothingSelected);
field.value = field.value.substring(0, startPos) + processedText + field.value.substring(endPos, field.value.length);
field.selectionStart = startPos + text.indexOf('{0}');
field.selectionEnd = field.selectionStart …Run Code Online (Sandbox Code Playgroud) 我正在使用 vanilla JavaScript 构建一个业余的富文本编辑器,并且 document.execCommand() 对于启用文本编辑器的核心功能至关重要。
例如粗体、斜体和无序列表命令:
Array.from(toolbarBtn).forEach(btn => {
btn.addEventListener('click', (e) => {
e.preventDefault();
if (e.target.id === "toolbar__btn--bold") {
format('bold');
}
if (e.target.id === "toolbar__btn--italic") {
format('italic');
}
if (e.target.id === "toolbar__btn--unorderedlist") {
format('insertunorderedlist');
}
});
});
Run Code Online (Sandbox Code Playgroud)
但是,在 MDN Web Docs 上查找此命令时,我发现此命令已过时:
过时 此功能已过时。尽管它可能在某些浏览器中仍然有效,但不鼓励使用它,因为它可以随时被删除。尽量避免使用它。
所以,我想知道在 vanilla JavaScript 中是否有任何替代方法可以创建像 execCommand() 那样的所有富文本编辑器功能?
谷歌搜索没有给我任何结果,所以同时,我想知道,该方法被宣布已过时,但没有建议的替代方法怎么可能。
我在iPhone上的UIWebView中显示一些简单的样式文本作为html.它基本上是一系列段落,偶尔会有强烈或强调的短语.在运行时,我需要将样式应用于文本范围.
有一些类似的场景,其中一个突出显示搜索结果.如果用户搜索了"某事",我想更改单词出现后的背景颜色,然后恢复原始背景.
是否可以使用javascript将样式应用于文本范围?其中一个关键部分也是能够取消设置风格.
似乎有两条可能的路径可供遵循.一个是修改Objective-C中的一些html并通过javascript传递它作为某个容器的新innerHTML.另一种方法是使用javascript直接操作DOM节点.
我可以操作html,但这在Objective-C中听起来很乏味,所以如果这是一种合理的方法,我宁愿操纵DOM.我不熟悉javascript和DOM,所以我不知道它是否是一种合理的方法.
我写了一些例程来在文本范围和具有偏移的节点范围之间进行转换.因此,如果我从文本范围100-200开始并且从一个段落开始到第三个结束,我可以获得文本节点和表示给定文本范围的节点内的偏移量.我只需要一种方法将文本节点拆分为文本中的偏移量.目前我只是将样式应用于包含文本范围的段落.
几点说明:
谢谢你的任何建议.
基本上我想要的是,如果用户在文本区域中选择一些文本并按 ctrl + b,那么所选内容中的文本应该被星号包围。
所以基本上我想要的是:
1)文本区域内容:“你好,这是一些文本”
2)用户选择一些文本并按ctrl + b“你好,这是一些文本”(假设粗体部分是文本选择)
3)所以我希望文本区域内容为:“你好,这是*一些*文本”
4)如果用户按下 ctrl + z(或任何撤消操作),文本区域内容应返回到“你好,这是一些文本”
我尝试过如何使用 javascript 将文本插入文本区域?并将文本插入光标位置的文本区域(Javascript)和类似的,但问题是,在大多数浏览器上执行撤消(ctrl + z)时,我希望文本返回到步骤 1 中的值。但这不会发生。我了解 stackoverflow 在其编辑器中实现了自己的撤消重做功能。但我希望不要那么复杂。必须支持chrome和safari
我正在考虑的一种方法是定位光标并发出合成键事件。我不知道它是否有效以及是否不会出现问题
过去,当您使用 javascript设置valuea 时textarea,Firefox 允许用户撤消此更改(例如,通过按 ctrl+Z)。但是,这不再有效,并且似乎没有任何体面的替代方案。
我已经尝试使用document.execCommand修改的textarea,但是这需要你自己来选择要修改的文本,它不会出现有可能在自动选择文本textarea。
我也听说过,document.createEvent("TextEvent")但我找不到关于此的太多信息。看来只能在光标处插入文本,我也需要删除文本。
创建我自己的撤消/重做系统并捕获ctrl+ Z/Y按下不是一个可接受的解决方案。
这里已经问过类似的问题,但它们只涉及在光标处插入文本,而不是完全改变 textarea 的值。
contenteditable我正在使用div 上的属性构建一个小型自定义编辑器。
默认情况下,当用户粘贴 HTML 内容时,HTML 会插入到 div 中contenteditable,这是我不想要的。
为了解决这个问题,我使用了一个自定义粘贴处理程序,如下问题所示:
停止在 contenteditable div 中粘贴 html 样式,仅粘贴纯文本
editor.addEventListener("paste", (e) => {
e.preventDefault();
const text = e.clipboardData.getData('text/plain');
document.execCommand("insertText", false, text.replaceAll("\n", "<div><br></div>"));
})
Run Code Online (Sandbox Code Playgroud)
到目前为止,一切都很好。因为execCommand已弃用,所以我使用了替代品,即基本上使用范围来手动插入文本(去除 HTML)。
editor.addEventListener("paste", (e) => {
e.preventDefault();
const text = (e.originalEvent || e).clipboardData.getData("text/plain");
const selection = window.getSelection();
selection.deleteFromDocument();
const range = selection.getRangeAt(0);
range.insertNode(document.createTextNode(text));
range.collapse();
});
Run Code Online (Sandbox Code Playgroud)
这很有效,直到我注意到粘贴某些内容后撤消和重做命令不再起作用。这是因为在自定义粘贴事件中完成了 DOM 修改,这是一个破坏因素。
在寻找解决方案时,我发现了以下问题:
允许 contenteditable 在 dom 修改后撤消
第一个答案建议使用execCommand,但它已被弃用,因此这不是一个好的解决方案。
第二个答案建议构建一个自定义撤消重做堆栈来手动处理所有这些事件。所以我选择了第二种解决方案。
我使用简单的数组来存储版本来构建自定义撤消重做处理程序。为此,我使用该 …