jquery - 将富文本粘贴到内容可编辑的 div 中，仅保留粗体和斜体格式

Question

我想将一些具有不同字体、字体大小、字体粗细等的富文本粘贴到内容可编辑的 div 中，并且只保留粗体和斜体。知道如何解决这个问题吗？

以下代码在粘贴到内容可编辑的 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);
});

我已经尝试查看上面代码中的 text 变量，但它似乎没有被格式化。

Answer 1

这是一个工作演示: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()});
});

它实际上用 span 替换了所有 html 标签。在那里，您可以选择让一些标签与原始文本中的标签相同(h1、p 等)，并根据需要设置样式。