将富文本粘贴到内容可编辑的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()});
});

它实际上html用spans 替换所有标签.在那里,你也可以选择让一些标签,因为他们在原来的文本(h1,p,等),其样式,你的愿望.

Answer 2

让我们从您的代码开始:

//on paste
var text = (e.originalEvent || e).clipboardData.getData('text/plain')


//html in clipboard are saved as Plain Unicode string , 

getData('text/plain') //return data as string,

//if MIME TYPE 'text/html' is used you will get data as html with style attributes

// insert text

document.execCommand('insertText', false, text);

//this will simply insert the text to contenteditable div.

//so there is no chance of knowing recieved text is bold / italics.

(1)我们必须以html格式获取数据,以获取样式属性:fontWeight,fontStyle.

(2)减少所需格式的html,

(3)附加到可信的div.

!important ::

我们依靠Clipboard API来获取数据.

新浏览器不完全支持它,请检查以下链接:

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/paste

http://caniuse.com/clipboard

所以在IE浏览器中它不会按预期工作.

我们在getData()中传递的数据格式参数在IE浏览器中是不同的:

http://msdn.microsoft.com/en-us/library/ie/ms536436(v=vs.85).aspx

所以我们只得到getData()方法中的普通字符串,我在IE 9.0.8112.16421(未更新)中检查过,

我不知道版本IE 10,11.

我以某种方式编码,如果在10,11代码中支持getData("Html"),则需求将完成.

代码工作:像@Cristi一样,获取所有html元素.

迭代它们,而不是改变我们使用标签的样式属性.

用于粗体的标签和用于斜体的标签.

迭代是异步完成的,因为粘贴大型文本内容可能会挂起浏览器.

我在Chrome,Firefox中测试过.

pasteArea.addEventListener('paste', function(e) {

    // prevent pasting text by default after event
    e.preventDefault(); 

    var clipboardData = {},
    rDataText,
    rDataHTML;

    clipboardData = e.clipboardData;
    rDataHTML = clipboardData.getData('text/html');
    rDataPText = clipboardData.getData('text/plain');


    if (rDataHTML && rDataHTML.trim().length != 0) {

        //Function Call to Handle HTML

        return false; // prevent returning text in clipboard
    }

    if (rDataPText && rDataPText.trim().length != 0) {

        //Function Call to Handle Plain String

        return false; // prevent returning text in clipboard
    }

}, false);

// Handle Plain Text
function PlainTextHandler(pText) {
    // Remove Line breaks
    // append to contenteditable div - using range.insertNode()
    // document.execCommand();  had issue in ie9 so i didn't used it 
}

// Handle HTML
function formatHtml(elem, complete) {
        var flag_italic = false;
        var flag_weight = false;
        var fontStyle;
        var fontWeight;

        if (elem.nodeType == 1) { // only pass html elements

            // get style in css 
            var CSSStyle = window.getComputedStyle(elem);
            fontStyle = CSSStyle.fontStyle;
            fontWeight = CSSStyle.fontWeight;

            // get style defined by inline
            var InlineStyle = elem.style;
            inlineFontStyle = InlineStyle['font-style'];
            inlineFontWeight = InlineStyle['font-weight'];
            if (inlineFontStyle && inlineFontStyle.trim() != '') fontStyle = inlineFontStyle;
            if (inlineFontWeight && inlineFontWeight.trim() != '') fontWeight = inlineFontWeight;

            // get style defined in MSword
            var msStyle = elem.getAttribute('style');
            if (/mso-bidi/.test(msStyle)) {
                var MSStyleObj = {};
                var styleStrArr = msStyle.split(";");
                for (i = 0; i < styleStrArr.length; i++) {
                    var temp = styleStrArr[i].split(":");
                    MSStyleObj[temp[0]] = temp[1];
                }
                fontStyle = MSStyleObj['mso-bidi-font-style'];
                fontWeight = MSStyleObj['mso-bidi-font-weight'];
            }

            if (fontStyle && fontStyle == 'italic') flag_italic = true; // flag true if italic

            if (fontWeight && (fontWeight == 'bold' || 600 <= (+fontWeight))) flag_weight = true;  // flag true if bold - 600 is semi bold

            // bold & italic are not applied via style
            // these styles are applied by appending contents in new tags string & bold
            if (flag_italic && flag_weight) {
                var strong = document.createElement('strong');
                var italic = document.createElement('i');
                strong.appendChild(italic);
                newtag = strong;
            } else {
                if (flag_italic) {
                    newtag = document.createElement('i');
                } else if (flag_weight) {
                    newtag = document.createElement('strong');
                } else {
                    // remove un wanted attributes & element
                    var tagName = elem.tagName;
                    // strong are not skipped because, by creating new unwanted attributes will be removed
                    if (tagName == 'STRONG' || tagName == 'B') {
                        newtag = document.createElement('strong');
                    } else if (tagName == 'I') {
                        newtag = document.createElement('i');
                    } else {
                        newtag = document.createElement('span');
                    }
                }
            }

            // content appended
            var elemHTML = elem.innerHTML;
            if (flag_italic && flag_weight) {
                newtag.childNodes[0].innerHTML = elemHTML;
            } else {
                newtag.innerHTML = elemHTML;
            }

            // curr element is replaced by new
            elem.parentNode.insertBefore(newtag, elem);
            elem.parentNode.removeChild(elem);
        }
        complete() // completed one iteration
    }

小提琴:http: //jsfiddle.net/aslancods/d9cfF/7/