我有一个基于 execCommand 的基本编辑器，遵循这里介绍的示例。在 execCommand 区域内有三种方法可以粘贴文本：
我希望只允许粘贴没有任何 HTML 标记的纯文本。如何强制前两个操作粘贴纯文本？
可能的解决方案：我能想到的方法是设置 (Ctrl+V) 的 keyup 事件监听器，并在粘贴之前去除 HTML 标记。
这段代码将拦截 paste 事件、取消 paste 并手动插入剪贴板的文本内容：
http://jsfiddle.net/HBEzc/。
这应该是最可靠的方法：
虽然我不确定跨浏览器的支持情况。
editor.addEventListener("paste", function(e) {
// cancel paste
e.preventDefault();
// get text representation of clipboard
var text = (e.originalEvent || e).clipboardData.getData('text/plain');
// insert text manually
document.execCommand("insertHTML", false, text);
});
text 包含 HTML（例如，如果你将 HTML 代码复制为纯文本），那么它实际上会将其粘贴为 HTML。 这里有一个解决方案，但它不是很美观：http://jsfiddle.net/HBEzc/3/. - pimvdbvar text = (event.originalEvent || event).clipboardData.getData('text/plain'); 这段代码可以提供更广泛的浏览器兼容性。请注意，我只提供翻译，不包括解释或其他内容。 - Duncan Walker<div></div> 的内容，该内容将作为可编辑元素的子元素添加。我通过以下方式进行修复：document.execCommand("insertText", false, text);。 - Jason NewellinsertHTML和insertText无法正常工作，但是document.execCommand('paste', false, text);可以正常使用。然而这种方法似乎在其他浏览器中不起作用。 >_> - Jamie Barker我无法让这里被接受的答案在IE浏览器中工作，所以我进行了一些搜索并找到了这个答案，在IE11和最新版本的Chrome和Firefox中都可以正常工作。
$('[contenteditable]').on('paste', function(e) {
e.preventDefault();
var text = '';
if (e.clipboardData || e.originalEvent.clipboardData) {
text = (e.originalEvent || e).clipboardData.getData('text/plain');
} else if (window.clipboardData) {
text = window.clipboardData.getData('Text');
}
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
} else {
document.execCommand('paste', false, text);
}
});
和pimvdb提供的解决方案很接近。但它适用于FF、Chrome和IE 9：
editor.addEventListener("paste", function(e) {
e.preventDefault();
if (e.clipboardData) {
content = (e.originalEvent || e).clipboardData.getData('text/plain');
document.execCommand('insertText', false, content);
}
else if (window.clipboardData) {
content = window.clipboardData.getData('Text');
document.selection.createRange().pasteHTML(content);
}
});
content 变量赋值的方式。我发现使用 getData('Text') 能够在跨浏览器的情况下正常工作，所以你可以像这样只赋值一次：var content = ((e.originalEvent || e).clipboardData || window.clipboardData).getData('Text'); 然后你只需要针对跨浏览器的粘贴/插入命令使用逻辑即可。 - gfullamdocument.selection.createRange().pasteHTML(content)... 我刚在IE11дёЉжµ‹иЇ•дє†дёЂдё‹пјЊе®ѓдёЌдјљеѓЏй‚Јж ·е·ҐдЅњгЂ‚ - vsyncdocument.execCommand('insertText', false, content) 不起作用。同时，最新版本的Chrome支持更简单的 document.execCommand('paste', false, content)。他们可能会弃用 insertText 命令。 - Cannicide当然，这个问题已经有答案并且话题很陈旧，但我想提供我的解决方案，因为它是简单而干净的：
这是在我的可编辑div上的粘贴事件内部。
var text = '';
var that = $(this);
if (e.clipboardData)
text = e.clipboardData.getData('text/plain');
else if (window.clipboardData)
text = window.clipboardData.getData('Text');
else if (e.originalEvent.clipboardData)
text = $('<div></div>').text(e.originalEvent.clipboardData.getData('text'));
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertHTML', false, $(text).html());
return false;
}
else { // IE > 7
that.find('*').each(function () {
$(this).addClass('within');
});
setTimeout(function () {
// nochmal alle durchlaufen
that.find('*').each(function () {
// wenn das element keine klasse 'within' hat, dann unwrap
// http://api.jquery.com/unwrap/
$(this).not('.within').contents().unwrap();
});
}, 1);
}
else部分来自另一个我无法找到的SO帖子...
更新于2014年11月19日： 另一篇SO帖子
所有已发布的答案似乎都不能跨浏览器正常工作，或者解决方案过于复杂：
insertText 命令不受 IE 支持。paste 命令会导致堆栈溢出错误。以下方法适用于我（IE11、Edge、Chrome 和 FF）：
$("div[contenteditable=true]").off('paste').on('paste', function(e) {
e.preventDefault();
var text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');
_insertText(text);
});
function _insertText(text) {
// use insertText command if supported
if (document.queryCommandSupported('insertText')) {
document.execCommand('insertText', false, text);
}
// or insert the text content at the caret's current position
// replacing eventually selected content
else {
var range = document.getSelection().getRangeAt(0);
range.deleteContents();
var textNode = document.createTextNode(text);
range.insertNode(textNode);
range.selectNodeContents(textNode);
range.collapse(false);
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
}
};<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<textarea name="t1"></textarea>
<div style="border: 1px solid;" contenteditable="true">Edit me!</div>
<input />
</body>contenteditable节点。因为textarea和普通的input字段都不支持粘贴HTML内容，所以这里无需采取任何措施。.originalEvent才能使其正常工作。因此，完整的代码行看起来像这样:const text = ev.clipboardData ? ev.clipboardData.getData('text/plain') : window.clipboardData.getData('Text');。适用于最新的Chrome，Safari和Firefox。 - Pwdrvar text = e.originalEvent.clipboardData ? e.originalEvent.clipboardData.getData('text/plain') : window.clipboardData.getData('Text'); 替换为 var text = (e.originalEvent || e).clipboardData.getData('text/plain');。 - Mohsen TOA注意，execCommand()已被弃用，在生产环境中请避免使用它。应该使用类似以下的方法：
const editor = document.querySelector('[contentEditable]')
editor.addEventListener('paste', handlePaste)
function handlePaste(e) {
e.preventDefault()
const text = (e.clipboardData || window.clipboardData).getData('text')
const selection = window.getSelection()
if (selection.rangeCount) {
selection.deleteFromDocument()
selection.getRangeAt(0).insertNode(document.createTextNode(text))
}
}[contentEditable] {
padding: 1em;
border: 1px solid black;
}<div contentEditable>Paste HTML here</div>Firefox不允许您访问剪贴板数据，因此您需要进行"黑客"操作才能使其正常工作。我还没有找到完整的解决方案，但是您可以通过创建一个文本区并将内容粘贴到其中来修复ctrl+v粘贴的问题:
//Test if browser has the clipboard object
if (!window.Clipboard)
{
/*Create a text area element to hold your pasted text
Textarea is a good choice as it will make anything added to it in to plain text*/
var paster = document.createElement("textarea");
//Hide the textarea
paster.style.display = "none";
document.body.appendChild(paster);
//Add a new keydown event tou your editor
editor.addEventListener("keydown", function(e){
function handlePaste()
{
//Get the text from the textarea
var pastedText = paster.value;
//Move the cursor back to the editor
editor.focus();
//Check that there is a value. FF throws an error for insertHTML with an empty string
if (pastedText !== "") document.execCommand("insertHTML", false, pastedText);
//Reset the textarea
paster.value = "";
}
if (e.which === 86 && e.ctrlKey)
{
//ctrl+v => paste
//Set the focus on your textarea
paster.focus();
//We need to wait a bit, otherwise FF will still try to paste in the editor => settimeout
window.setTimeout(handlePaste, 1);
}
}, false);
}
else //Pretty much the answer given by pimvdb above
{
//Add listener for paster to force paste-as-plain-text
editor.addEventListener("paste", function(e){
//Get the plain text from the clipboard
var plain = (!!e.clipboardData)? e.clipboardData.getData("text/plain") : window.clipboardData.getData("Text");
//Stop default paste action
e.preventDefault();
//Paste plain text
document.execCommand("insertHTML", false, plain);
}, false);
}
<div data-lang="js" data-hide="false" data-console="true" data-babel="false" class="snippet">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.plain-text-only {
user-modify: read-write-plaintext-only;
-moz-user-modify: read-write-plaintext-only;
-webkit-user-modify: read-write-plaintext-only;
}
div[contenteditable] {
padding: 1rem 0.5rem;
border: 2px solid #eee;
border-radius: 4px;
margin-bottom: 2rem;
}<div contenteditable class="plain-text-only">Can't paste HTML here</div>
<div contenteditable>HTML styled text free</div>我也在处理纯文本粘贴时遇到了execCommand和getData错误，所以我决定采用传统的方式来解决问题，现在它已经完美地运行了:
$('#editor').bind('paste', function(){
var before = document.getElementById('editor').innerHTML;
setTimeout(function(){
var after = document.getElementById('editor').innerHTML;
var pos1 = -1;
var pos2 = -1;
for (var i=0; i<after.length; i++) {
if (pos1 == -1 && before.substr(i, 1) != after.substr(i, 1)) pos1 = i;
if (pos2 == -1 && before.substr(before.length-i-1, 1) != after.substr(after.length-i-1, 1)) pos2 = i;
}
var pasted = after.substr(pos1, after.length-pos2-pos1);
var replace = pasted.replace(/<[^>]+>/g, '');
var replaced = after.substr(0, pos1)+replace+after.substr(pos1+pasted.length);
document.getElementById('editor').innerHTML = replaced;
}, 100);
});
function PasteString() {
var editor = document.getElementById("TemplateSubPage");
editor.focus();
// editor.select();
document.execCommand('Paste');
}
function CopyString() {
var input = document.getElementById("TemplateSubPage");
input.focus();
// input.select();
document.execCommand('Copy');
if (document.selection || document.textSelection) {
document.selection.empty();
} else if (window.getSelection) {
window.getSelection().removeAllRanges();
}
}
以上代码在IE10和IE11中对我有效，并且现在也适用于Chrome和Safari。未在Firefox中测试。