summernote的兼容ie的剪切板实现-clipboard

来源:互联网 发布:万网买域名 编辑:程序博客网 时间:2024/05/22 13:35

在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); }
0 0
原创粉丝点击