在使用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;
}