将富文本粘贴到内容可编辑div中，只保留粗体和斜体格式 [英] Paste rich text into content-editable div and only keep bold and italics formatting

问题描述

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

以下代码将粘贴到content-editable div中的富文本转换为纯文本。
$ b （'paste'，function（e）{
e.preventDefault（）;
var text（）; $ b

  $（'[contenteditable]'）。 =（e.originalEvent || e）.clipboardData.getData（'text / plain'）|| prompt（'Paste something ..'）; 
 document.execCommand（'insertText'，false，text）; 
}）; 
  

我试着看文字变量在上面的代码中，但它似乎没有格式化。

解决方案

这是一个工作演示：http://jsfiddle.net/SJR3H/7/

 < （'paste'，function（e）{
 $ b（'[contenteditable]'）。code> $（document）.ready（function（）{
 $ b $ $ b e.preventDefault（）; 
 
 var text =（e.originalEvent || e）.clipboardData.getData（'text / html'）|| prompt（'Paste something ..'）; 
 var $ result = $（'< div>< / div>'）。append（$（text））; 
 
 $（this）.html（$ result.html （））; 
 
 //替换除粗体和斜体外的所有样式
 $ .each（$（this）.find（*），function（idx，val）{
 $ b $ 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）; 
} 
}）; 
 
 //删除不必要的标签（如果从单词粘贴）
 $（this）.children（'style'）。remove（）; 
 $（this）.children（'meta'）。remove（）
 $（this）.children（'link'）。remove（）; 
 
}）; 
 
}）; 
  

稍后编辑 http://jsfiddle.net/SJR3H/8/

我添加了以下几行：

  $ item.replaceWith（function（）{
 return $（< span />，{html：$ ）.html（）}）; 
}）; 
  

它实际上将所有 html 标签替换为跨度秒。您可以选择让原始文本中的某些标记（ h1 ， p 等），按照你的愿望造型。

I want to paste some rich text which has different fonts, font sizes, font weights, etc. into a content-editable div and ONLY keep boldness and italics. Any idea how to go about this?

The following code turns rich text into plain text when pasted into 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);
});

I've tried looking at the text variable in the above code, but it doesn't seem to be formatted.

解决方案

Here's a working demo: 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();

        });

    });

Later edit: http://jsfiddle.net/SJR3H/8/

i added the following lines:

$item.replaceWith(function(){
       return $("<span />", {html: $(this).html()});
});

It actually replaces all html tags with spans. There you can optionally choose to let some tags as they were in the original text (h1, p, etc), styling them as you desire.

这篇关于将富文本粘贴到内容可编辑div中，只保留粗体和斜体格式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！