我想将一些不同字体，字体大小，字体重量等的丰富文本粘贴到内容可编辑的div中，并且只保留粗体和斜体。有什么想法呢？
以下代码将富文本转换为纯文本粘贴到content-editable div中。
$('[contenteditable]').on('paste',function(e) {
e.preventDefault();
var text = (e.originalEvent || e).clipboardData.getData('text/plain') || prompt('Paste something..');
document.execCommand('insertText',false,text);
});
我试过看看上面的代码中的文本变量，但它似乎没有被格式化。
解决方法
这是一个工作演示：
http://jsfiddle.net/SJR3H/7/
$(document).ready(function(){
$('[contenteditable]').on('paste',function(e) {
e.preventDefault();
var text = (e.originalEvent || e).clipboardData.getData('text/html') || prompt('Paste something..');
var $result = $('<div></div>').append($(text));
$(this).html($result.html());
// replace all styles except bold and italic
$.each($(this).find("*"),function(idx,val) {
var $item = $(val);
if ($item.length > 0){
var saveStyle = {
'font-weight': $item.css('font-weight'),'font-style': $item.css('font-style')
};
$item.removeAttr('style')
.removeClass()
.css(saveStyle);
}
});
// remove unnecesary tags (if paste from word)
$(this).children('style').remove();
$(this).children('Meta').remove()
$(this).children('link').remove();
});
});
后来编辑：http://jsfiddle.net/SJR3H/8/
我添加了以下行：
$item.replaceWith(function(){
return $("<span />",{html: $(this).html()});
});
它实际上用跨度代替了所有的html标签。在那里，您可以选择将一些标签放在原始文本(h1，p等)中，根据需要对其进行样式化。