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
- summernote的兼容ie的剪切板实现-clipboard
- Clipboard 剪切板的应用&&Action
- Windows下利用win32clipboard实现Python的剪切板(Clipboard)操作
- clipboard.js——兼容各种版本浏览器的剪切板库
- android中剪切板的应用(clipboard)
- SAP对ClipBoard(剪切板)的操作
- SAP对ClipBoard(剪切板)的操作
- 纯clipboard.js实现复制(IE兼容至IE7)
- SWT 的拖放操作,DragSource 和 DropTarget 与剪切板(Clipboard)
- 在无clipboard 的vim 中, 如何使用系统剪切板
- C#读取剪切板(Clipboard)中的数据的方法
- 简单的jquery一键复制值到剪切板--clipboard
- 简单解决——使用Clipboard实现剪切板,用require引入js资源,会报错Clipboard is not defined的问题
- 剪切板clipboard
- 兼容各浏览器的Zero Clipboard js+swf实现的复制功能使用方法
- PIE兼容IE的圆角实现
- 实现ie浏览器对placeholder的兼容
- IE兼容实现HTML5的placeholder
- Go语言基础语法学习笔记[2]
- 深入理解JVM(六)——JVM性能调优实战
- 全面介绍Android Studio中Git 的使用(二)
- 服务器基于ThreadPool接收文件
- window.print打印指定div
- summernote的兼容ie的剪切板实现-clipboard
- 《Head first设计模式》学习笔记 – 迭代器模式
- Myeclipse为Web项目添加Maven支持
- javascript弹出提示框
- 链表的基本操作函数算法(C/C++实现)
- 深入聊聊Android事件分发机制
- Spring4.1.0 - SpringMVC第一步,Tomcat服务器端正常,客户端无法响应JSP页面问题处理
- 每天一题LeetCode[第六天]
- Linux系统的使用(二)