基于summernote的富文本编辑器，粘贴时去除word格式

在使用summernote的富文本编辑器，在粘贴word内容时，会发现代码中有很多无效的代码。通过js处理，可以去掉很多无用的代码。

处理前，粘贴后的代码类似这样：

<p><!--[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 fixsetTimeout(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 buttonvar 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 editorfocus: 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 classesvar stringStripper = /(\n|\r| class=(")?Mso[a-zA-Z]+(")?)/g;var output = input.replace(stringStripper, ' ');// 2. strip Word generated HTML commentsvar 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 anyoutput = 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;
}

基于summernote的富文本编辑器，粘贴时去除word格式相关推荐

springboot整合H+,基于summernote的富文本编辑器图片上传
我在做这块任务时遇到了好几个问题,也查了一些资料,自己总结的一些东西,希望可以帮到一些有需要的朋友,废话不多说开始看代码. 首先看前台页面: 需要注意的是summernote的默认图片上传是base6 ...
基于summernote的富文本编辑器，粘贴时去除word、html格式
<script> $(document).ready(function() { $('#summernote').summernote({ height: 350, lang: 'zh-C ...
基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程基于jQuery的富文本编辑器summernote插件的使用教程一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
html编辑保存为word文档,html 保存成word (富文本编辑器导出内容成word)
这几天项目里有个需求,用到富文本编辑器,然后导出word. 富文本编辑器,网上很多,使用夜很简单,我们使用的是kindEditor.百度的ueditor很好,而且文档很全.阿里的kissy 感觉比较复 ...
富文本编辑器粘贴复制Word
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
富文本编辑器tinymce支持从word复制粘贴保留格式和图片的插件powerpaste
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
【uEditor】引入富文本编辑器uEditor时，上传图片失败的原因
uEditor uEditor是百度开发的一款开源的富文本编辑器.官网地址:http://ueditor.baidu.com/website/ 使用教程请看官网文档前言如何引入我就不赘述了,官网有 ...
基于 Layui 的富文本编辑器和封面的实现方案
文章目录前言素材文件 1. 富文本编辑器的实现步骤 1.1 添加 layui 表单行 1.2 导入富文本必须的 script 脚本 1.3 初始化富文本编辑器 2. 图片封面裁剪的实现步骤 2.1 ...
Vue 自定义富文本编辑器 tinymce 支持导入 word 模板
自定义富文本编辑器分为前端项目和后端项目两个部分,首先先说一下前端项目前端前端项目地址: https://github.com/haoxiaoyong1014/editor-ui 编辑器名称: t ...

基于summernote的富文本编辑器，粘贴时去除word格式

基于summernote的富文本编辑器，粘贴时去除word格式相关推荐

最新文章

热门文章