summernote的兼容ie的剪切板實現-clipboard

在summernote編輯器中剪貼板的內容進行一次格式化（仿簡書）然後再粘貼在編輯器內。對於谷歌等支持獲取剪切板HTML格式數據的瀏覽器還好，獲取數據後直接格式化就好了。但是不要忘了，還有IE坑呢，在ie上瀏覽器沒有提供獲取剪切板HTML格式的接口，只能獲取純文本和url格式的。
後來一再讀summernote源碼才發現，summernote默認加載Clipboard模塊。Clipboard初始化代碼

if (this.needKeydownHook()) {
        //在編輯器前插入一個div模擬剪切板（屏幕內不可見），tabindex="-1"防止用戶通過tab鍵導航時，誤編輯模擬剪切板
        this.$paste = $('<div tabindex="-1" />').attr('contenteditable', true).css({
          position: 'absolute',
          left: -100000,
          opacity: 0
        });
        $editable.before(this.$paste);

        this.$paste.on('paste', function (event) {
          context.triggerEvent('paste', event);
        });
      } else {
        $editable.on('paste', this.pasteByEvent);
      }

Clipboard提供了獲取剪切板HTML格式數據的辦法。在捕捉到Ctrl+V粘貼事件後，把焦點轉移到模擬的剪貼板上，這樣會把真正剪切板的數據粘貼在模擬的剪切板上，這樣，就可以通過對模擬剪切板的HTML格式數據進行格式化

this.events = {
      // 綁定按鍵事件
      'summernote.keydown': function (we, e) {
        if (self.needKeydownHook()) {
        // 捕捉Ctrl+V粘貼事件
          if ((e.ctrlKey || e.metaKey) && e.keyCode === key.code.V) {
            context.invoke('editor.saveRange');

            self.$paste.focus();

            setTimeout(function () {
              self.pasteByHook();
            }, 0);
          }
        }
      }
    };

pasteByHook方法中，如果粘貼內容不是img,就通過以下方式進行格式化並完成粘貼

var content = this.$paste.html();
 var htmlReg = /^<\w*>\w*|\s*</\w*>$/;
 var pasteContent = $.format(content);
 context.invoke('editor.restoreRange');
 context.invoke('editor.focus');

 if (pasteContent) {
   context.invoke('editor.pasteHTML', pasteContent);
 }