基于summernote的富文本编辑器，粘贴时去除word格式

在使用summernote的富文本编辑器，在粘贴word内容时，会发现代码中有很多无效的代码。通过js处理，可以去掉很多无用的代码。

处理前，粘贴后的代码类似这样：

<p><!--[if !mso]>

<style>

v\:* {behavior:url(#default#VML);}

o\:* {behavior:url(#default#VML);}

w\:* {behavior:url(#default#VML);}

.shape {behavior:url(#default#VML);}

</style>

<![endif]--><!--[if gte mso 9]><xml>

<o:OfficeDocumentSettings>

<o:AllowPNG></o:AllowPNG>

</o:OfficeDocumentSettings>

</xml><![endif]--><!--[if gte mso 9]><xml>

<w:WordDocument>

。。。。。

处理以后，这些无效的代码都可以去除。两种处理方法：

方法1：

在summernote的onPaste事件中处理。js如下：

$('#summernote').summernote({
callbacks: {
onPaste: function (ne) {
var bufferText = ((ne.originalEvent || ne).clipboardData || window.clipboardData).getData('Text/plain');
//    ne.preventDefault();
ne.preventDefault ? ne.preventDefault() : (ne.returnValue = false);
// Firefox fix
setTimeout(function () {
document.execCommand("insertText", false, bufferText);
}, 10);
/*  */
}
}

});

以上代码在win10下ie11和firefox49中测试通过。

其中要点：

getData('Text/plain')，这里一定要加上plain（不知原因），否则，ie11不能粘贴，而FF、Edge则正常。

另外奇怪的地方，ie11可以粘贴过来图形，而FF和Edge却不行。莫名其妙。

========================

方法2：

通过js方法处理。添加summernote自定义按钮，自定义按钮事件，使用js方法有效去除庸余代码，此方法效果好于上述方法。此方法在IE11下测试通过。

// custom button
var EmptyButton = function (context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="note-icon-trash"/>',
tooltip: '清除全部内容',
click: function () {
context.invoke('editor.empty');
}
});
return button.render();
};
var CleanWordButton = function (context) {
var ui = $.summernote.ui;
var button = ui.button({
contents: '<i class="note-icon-square"/>',
tooltip: '清除Word格式',
click: function () {
//  清除img的wrap元素
var str = context.invoke('code');
str = CleanPastedHTML(str); //  class="hidden"
$('.container').append('<div id="tmp">' + str + '</div>');
$('#tmp table img').unwrap( );
str = $('#tmp').html();
str = CleanPastedHTML(str); //  class="hidden"
$('#tmp').remove();
context.invoke('code', str);
}
});
return button.render();
};
$(document).ready(function () {
$('.summernote').summernote({
lang: 'zh-CN',
height: 500,
minHeight: 240, // set minimum height of editor
// maxHeight: null, // set maximum height of editor
focus: true, // set focus to editable area after initializing su
dialogsInBody: true,
dialogsFade: true, // Add fade effect on dialogs,
disableDragAndDrop: true,
shortcuts: true,
placeholder: '在这里添加内容',
toolbar: [
['style', ['clear', 'bold', 'italic', 'underline', 'word']],
['font', ['fontname', 'fontsize', 'strikethrough', 'superscript', 'subscript']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph', 'style', 'height']],
['insert', ['table', 'picture', 'hr']],
['mybutton', ['empty', 'undo', 'redo']],
['misc', ['fullscreen', 'codeview', 'help']]
],
buttons: {empty: EmptyButton, word: CleanWordButton}
});
$('.note-group-image-url').hide(); // 隐藏img url
$('.summernote').summernote('code', '<p><br></p>');
$('.summernote').summernote('focus');
$('.summernote').summernote('fullscreen.toggle');
});

function CleanPastedHTML(input) {
// 1. remove line breaks / Mso classes
var stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;
var output = input.replace(stringStripper, ' ');
// 2. strip Word generated HTML comments
var commentSripper = new RegExp('<!--(.*?)-->','g');
var output = output.replace(commentSripper, '');
var tagStripper = new RegExp('<(/)*(meta|link|span|\\?xml:|st1:|o:|font)(.*?)>','gi');
// 3. remove tags leave content if any
output = output.replace(tagStripper, '');
// 4. Remove everything in between and including tags '<style(.)style(.)>'
var badTags = ['style', 'script','applet','embed','noframes','noscript'];

for (var i=0; i< badTags.length; i++) {
tagStripper = new RegExp('<'+badTags[i]+'.*?'+badTags[i]+'(.*?)>', 'gi');
output = output.replace(tagStripper, '');
}
// 5. remove attributes ' style="..."'
var badAttributes = ['style', 'start'];
for (var i=0; i< badAttributes.length; i++) {
var attributeStripper = new RegExp(' ' + badAttributes[i] + '="(.*?)"','gi');
output = output.replace(attributeStripper, '');
}
return output;
}