我有一个contentEditable
,我通过捕捉事件剥离了粘贴的内容on('paste')
的格式。然后我将焦点放在一个文本区域中,将内容粘贴到其中,然后复制值。here给出了很好的答案。问题是我不能这样做:
$("#paste-output").text($("#area").val());
因为这会用粘贴的文本替换我的整个内容。所以我需要将内容粘贴到插入符号的位置。我编写了一个脚本来实现这一点:
pasteHtmlAtCaret($("#area").val());
// pastes CTRL+V content at caret position
function pasteHtmlAtCaret(html) {
var sel, range;
if (window.getSelection) {
sel = window.getSelection();
if (sel.getRangeAt && sel.rangeCount) {
range = sel.getRangeAt(0);
range.deleteContents();
var el = document.createElement("div");
el.innerHTML = html;
var frag = document.createDocumentFragment(), node, lastNode;
while ((node = el.firstChild)) {
lastNode = frag.appendChild(node);
}
range.insertNode(frag);
if (lastNode) {
range = range.cloneRange();
range.setStartAfter(lastNode);
range.collapse(true);
sel.removeAllRanges();
sel.addRange(range);
}
}
} else if (document.selection && document.selection.type != "Control") {
document.selection.createRange().pasteHTML(html);
}
}
唯一的问题是它使用html
变量在插入符号位置粘贴HTML内容。如何将其转换为纯文本?我尝试将jQuery .text(html)
添加到variable中,但没有成功。像这样的东西可能会有帮助:
el.textContent||el.innerText;
有什么想法或更好的解决方案吗?谢谢!
编辑:感谢下面的回答,我修改了我的代码并解决了这个问题。我基本上是将textarea
的值复制到div
中,并只获取它的.text()
// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
var text = $('<div>').html($("#area").val()).text();
pasteHtmlAtCaret(text);
}, 20);
});
发布于 2013-06-29 02:52:02
应Jonathan Hobbs的请求,我将此作为答案发布。感谢上面的回答,我修改了我的代码并解决了这个问题。我基本上把textarea的值复制到了一个div中,只获取了它的.text():
// on paste, strip clipboard from HTML tags if any
$('#post_title, #post_content').on("paste", function() {
setTimeout(function(){
var text = $('<div>').html($("#area").val()).text();
pasteHtmlAtCaret(text);
}, 20);
});
发布于 2013-02-28 08:29:28
G29
发布于 2015-01-20 16:02:29
替换标签解决方案:
http://jsfiddle.net/tomwan/cbp1u2cx/1/
var $plainText = $("#plainText");
var $linkOnly = $("#linkOnly");
var $html = $("#html");
$plainText.on('paste', function (e) {
window.setTimeout(function () {
$plainText.html(removeAllTags(replaceStyleAttr($plainText.html())));
}, 0);
});
$linkOnly.on('paste', function (e) {
window.setTimeout(function () {
$linkOnly.html(removeTagsExcludeA(replaceStyleAttr($linkOnly.html())));
}, 0);
});
function replaceStyleAttr (str) {
return str.replace(/(<[\w\W]*?)(style)([\w\W]*?>)/g, function (a, b, c, d) {
return b + 'style_replace' + d;
});
}
function removeTagsExcludeA (str) {
return str.replace(/<\/?((?!a)(\w+))\s*[\w\W]*?>/g, '');
}
function removeAllTags (str) {
return str.replace(/<\/?(\w+)\s*[\w\W]*?>/g, '');
}
https://stackoverflow.com/questions/15125217
复制相似问题