基于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;
}