Web应用程序如何检测粘贴事件并检索要粘贴的数据？
我想在将文本粘贴到富文本编辑器之前删除HTML内容.
之后粘贴后清理文本有效,但问题是所有以前的格式都丢失了.例如,我可以在编辑器中编写一个句子并将其设为粗体,但是当我粘贴新文本时,所有格式都会丢失.我想只清理粘贴的文本,并保持以前的格式不变.
理想情况下,该解决方案应适用于所有现代浏览器(例如,MSIE,Gecko,Chrome和Safari).
请注意,MSIE有clipboardData.getData(),但我找不到其他浏览器的类似功能.
我有一个具有contenteditable集合的div,我正在使用jquery捕获按键,以便在按下回车键时调用preventDefault().类似于 在光标处插入文本的这个问题,我想直接插入html,为简洁起见,我们会说它是一个br标签.使用上面问题的答案实际上在IE中工作,因为它使用range.pasteHTML方法,但在其他浏览器中,br标记将显示为纯文本而不是html.我怎么能修改插入HTML而不是文本的答案？
我正在将一个元素插入到contentEditable div中,但浏览器会在插入的元素之前设置光标的位置.是否可以在插入的元素后面设置光标,以便用户不必重新调整光标位置就可以输入？
我试图让一个只接受纯文本的满足者.
我想要的是听取粘贴事件,然后删除所有的HTML并将其粘贴到contenteditable上仅作为纯文本.
为了做到这一点,我已经尝试了两种不同的方法,基于类似问题的答案,但这两种方法都存在问题.
第一: 这个没有使用"粘贴"监听器,而是监听输入(对于这种情况不太理想),这是避免使用Clipboard API的解决方案.
问题:这在chrome上工作正常,但在firefox和IE上没有,当你复制并粘贴html时,它成功地删除了html并且只粘贴了文本,但是当继续写文本时,插入符始终被带到了contenteditable的开头.
function convertToPlaintext() {
var textContent = this.textContent;
this.textContent = textContent;
}
var contentEditableNodes = document.querySelectorAll('.plaintext[contenteditable]');
[].forEach.call(contentEditableNodes, function(div) {
div.addEventListener("input", convertToPlaintext, false);
});
您可以在这里尝试/我所基于的代码: http ://jsbin.com/moruseqeha/edit？html,css,js,output
第二: 由于第一个失败并且没有只听"粘贴"事件,我决定尝试使用Clipboard API.这里的问题是IE上的document.execCommand("insertHTML",false,text); 似乎不起作用.这适用于chrome,firefox(在v41和v42上测试)和边缘.
document.querySelector(".plaintext[contenteditable]").addEventListener("paste", function(e) {
e.preventDefault();
var text = "";
if (e.clipboardData && e.clipboardData.getData) {
text = e.clipboardData.getData("text/plain");
} else if (window.clipboardData && window.clipboardData.getData) {
text = window.clipboardData.getData("Text");
}
document.execCommand("insertHTML", false, text);
});
你可以在这里试试:http://jsfiddle.net/marinagon/461uye5p/
任何人都可以帮助我找到解决这些问题的解决方案,或者任何人都有比这里提出的解决方案更好的解决方案？
我知道我可以使用textarea,但我有理由不使用它. …
我正在寻找一种方法来制作一个非常基本的所见即用,例如当用户舔按钮时,它插入符号♂(♂)
它工作但有两个问题:1 - 只插入unicode字符,它们不会转换为符号(♂)
2-如果你有时间,是否有一种简单的方法可以在"文本光标"所在的位置插入符号,而不是在textarea内容的末尾？
谢谢你的帮助
精简版:
我有一个满足的div.我想在carret postion之前移除最后的x个字符.
长版:
如果有人[在contenteditable div中键入a ,则应该出现一个autosuggest列表,由ajax调用填充.这已经完成了.我也可以在carret位置插入所选的建议并添加一个].但是,在添加建议之前,应删除已经由用户键入的字符.括号[不仅是"trigger-char",还是一种类似markdown的格式元素.
例:
div中的文字("|"代表carret): Lorem ipsum| sit lorem ipsum dolor
用户现在键入[do以启动自动建议:Lorem ipsum [do| sit lorem ipsum dolor
dolor 建议并在carret后插入: Lorem ipsum [do|dolor sit lorem ipsum dolor
问题:do在插入建议之前,应该删除allready类型的字符
期望的行为: Lorem ipsum [dolor] sit lorem ipsum dolor
尝试的解决方案:
在内容可编辑div中的光标处插入文本 - 工作但我无法删除最后的字符 https://developer.mozilla.org/en-US/docs/Web/API/Selection - 尝试从MDN获取一些想法,但不知道如何更改选择的textNode的内容
码:
提取最后一个"["和carret之间的字符串以在DB中搜索建议:
var sel = window.getSelection();
var cords = getCaretCoords();
var searchQuery = extractSearchQuery(sel.anchorNode.data, sel.anchorOffset, "[");
function extractSearchQuery(searchString, caretPos, triggerString) {
//cut …