标签: execcommand
在execCommand中'粘贴为纯文本'的Javascript技巧
我有一个基本编辑器,基于execCommand这里介绍的示例.在该区execCommand域内粘贴文本有三种方法:
- Ctrl+V
- 右键单击 - >粘贴
- 右键单击 - >粘贴为纯文本
我想只允许粘贴纯文本,不带任何HTML标记.如何强制前两个操作粘贴纯文本？
可能的解决方案:我能想到的方法是在粘贴之前为(Ctrl+ V)设置用于keyup事件的监听器并剥离HTML标签.
- 这是最好的解决方案吗？
- 是否可以防止粘贴中出现任何HTML标记？
- 如何将侦听器添加到右键单击 - >粘贴？
推荐指数
解决办法
查看次数
execCommand() 现在已过时，有什么替代方法？
我打算使用Document.execCommand()方法和contenteditable属性来构建我的自定义 WYSIWYG 编辑器。但是当我查看 的文档时Document.execCommand()，我发现它现在已经过时了。它的现代（或现存）替代品是什么？
推荐指数
解决办法
查看次数
在制作富文本/所见即所得编辑器时,Contenteditable div与iframe
我正在尝试权衡使用<div>和<iframe>制作我自己的富文本/所见即所得编辑器的优点和缺点.
在这样做的时候,为什么我不能只使用一个满足 <div>而且为什么这么多人更喜欢<iframe>？
背景讨论:根据我的理解,制作一个所见即所得编辑器的常用方法是使div或iframe 满足,然后对execCommand包含div或iframe主体的文档进行操作,使其文本变为粗体或其他.
这是HTML:
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<div contenteditable="true"></div>
</body>
</html>
VS:
<html><!--parent doc-->
<body><button type="button" class="btn-bold">Bold</button>
<iframe>
<body contenteditable="true"></body>
</iframe>
</body>
</html>
和JS:
$(document.body).on('click', '.btn-bold', function(){
document.execCommand('bold', false, null);
});
VS:
$(document.body).on('click', '.btn-bold', function(){
window.frames[0].document.body.execCommand('bold', false, null);
});
看起来大多数制作精良的富文本编辑器都使用iframe.虽然我可以很容易地在Webkit浏览器中使用这个contenteditable/execCommandcombo来处理div/iframe,但是我有一个地狱般的时间试图让iframe在Firefox中运行.我不得不求助于将脚本和样式表加载到iframe和各种废话中来复制我可以使用基于div的版本轻松完成的任务.所以<div>基于方法似乎更可取.我重新考虑任何有力的理由？
推荐指数
解决办法
查看次数
推荐指数
解决办法
查看次数
JavaScript document.execCommand()拥有自己的标签
我发现一些非常有趣!execCommand函数应用了许多有用的功能.但是可以使用OWN包裹吗？喜欢:
document.execCommand("styleWithCSS", false, "<span class='own-class'>");
我发现的所有相关内容都很古老......所以也许你们其中一个人知道一个好的解决方法或者什么.
推荐指数
解决办法
查看次数
有没有办法让execCommand("insertHTML")不删除chrome中的属性？
上下文是Chrome 37.0.2062.120 m.
我正在使用execCommand将html插入到可编辑的div中.我的execCommand调用如下所示:
function insertHTML(){
document.execCommand('insertHTML', false, '<span id="myId">hi</span>');
}
当可编辑的div看起来像这样:
<div contenteditable="true">
some [insertion point] content
</div>
我使用execCommand将html插入一个contenteditable div,HTML的所有属性都按预期插入,我最终得到这个:
<div contenteditable="true">
some <span id="myId">hi</span> content
</div>
但是,当我在此结构中插入完全相同的html时:
<div contenteditable="true">
some content
<div>more [insertion point] content</div>
</div>
从插入的跨度中删除属性,它最终看起来像这样:
<div contenteditable="true">
some content
<div>more <span style="font-size: 10pt;">hi</span> content</div>
</div>
有没有办法防止这种情况发生？
推荐指数
解决办法
查看次数
document.execCommand()FontSize以像素为单位？
如何使用document.execCommand？将字体大小更改为30px(例如)？
这个:
document.execCommand("fontSize", false, "30px");
不起作用,因为在函数execCommand的第三个参数中,它只允许我在1到7之间输入一个值.
推荐指数
解决办法
查看次数
有没有比document.execCommand更好的东西？
在实现基于Web的富文本编辑器时,我读到这document.execCommand对于对HTML文档执行操作很有用(比如选择粗体).但是,我需要一些更好的东西.具体来说,我需要确切地知道在innerHTML中添加或删除了哪些文本,以及在什么位置(作为整个文档的HTML表示的偏移量).
我考虑过使用内置的document.execCommand和DOM4的变异观察器,但execCommand似乎没有完成任务:
- 我没有看到一种"不加粗体"选择的方法
- 生成的html似乎因浏览器而异.(我希望<span>标签不是<b>,但一致性更重要)
- 并且没有关于它如何处理冗余嵌套/相邻<span>标签的信息.
此外,根据我的需要,使用变异观察器似乎有点矫枉过正.
我的动机:我正在尝试定期向服务器传输文档更改,而无需重新传输整个文档.我将数据作为HTML表示的插入和删除集合发送.如果有人知道如何从CKEditor中获取此功能(所以我不必从头开始),那么我会永远爱你.
注意:执行文本差异不是一种选择,因为它在非常大的文档上表现不佳.
否则,我并不是害怕尝试写一些这样做的东西.DOM的范围对象提供的方法将处理很多繁重的工作.我也很欣赏有关这种可能性的建议.
推荐指数
解决办法
查看次数
使用execCommand'createlink'添加target ="_ blank"
我正在尝试为自定义CMS创建一个迷你WYSIWYG编辑器.它可以选择添加和删除链接.它添加链接很好,但希望有添加target="_blank"到超链接的选项.另外,如果可能的话,我希望能够添加alt=""和title="".
目前这是我的代码:
function addLink() {
var linkURL = prompt('Enter a URL:', 'http://');
editorWindow.document.execCommand('createlink', false, linkURL);
}
一直在四处寻找,似乎无法找到解决方案.我见过的大多数解决方案都说要添加:
function addLink() {
var linkURL = prompt('Enter a URL:', 'http://');
var newLink = editorWindow.document.execCommand('createlink', false, linkURL);
newLink.target = "_blank";
}
但这似乎不起作用.有什么建议？
推荐指数
解决办法
查看次数
document.execCommand 有替代品吗？（或者使用 document.execCommand 安全吗？）
我正在使用 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');
}
});
});
但是，在 MDN Web Docs 上查找此命令时，我发现此命令已过时：
过时 此功能已过时。尽管它可能在某些浏览器中仍然有效，但不鼓励使用它，因为它可以随时被删除。尽量避免使用它。
所以，我想知道在 vanilla JavaScript 中是否有任何替代方法可以创建像 execCommand() 那样的所有富文本编辑器功能？
谷歌搜索没有给我任何结果，所以同时，我想知道，该方法被宣布已过时，但没有建议的替代方法怎么可能。
推荐指数
解决办法
查看次数
标签 统计
execcommand ×10
javascript ×10
html5 ×2
ckeditor ×1
css ×1
dom ×1
domdocument ×1
editor ×1
html ×1
jquery ×1
richtext ×1
wysiwyg ×1