wangEditor富文本编辑器：自定义粘贴，去除复制word或网页html冗余样式代码的解决方案

1.环境说明
2.解决方案
3.完整代码
总结

在使用wangEditor富文本编辑器时，当从word文档或者其他网页复制文本内容粘贴到编辑器中，如果不过滤掉复制文本中自带的样式，会导致复制的内容比较错乱，甚至无法添加到数据库中。为了解决这个问题，我们需要对从word中粘贴的内容进行处理，把多余的代码剔除，让粘贴后的文本变得更加简洁和轻量。

1.环境说明

wangEditor，V5版本；
编辑器配置参数：customPaste，即自定义粘贴，可阻止编辑器的默认粘贴，实现自己的粘贴逻辑。
使用说明，传送门

editorConfig.customPaste = (editor, event) => {// const html = event.clipboardData.getData('text/html') // 获取粘贴的 htmlconst text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本// const rtf = event.clipboardData.getData('text/rtf') // 获取 rtf 数据（如从 word wsp 复制粘贴）// 同步editor.insertText('xxx')// 异步setTimeout(() => {editor.insertText('yy')}, 1000)// 阻止默认的粘贴行为event.preventDefault()return false// 继续执行默认的粘贴行为// return true
}

2.解决方案

    //默认粘帖editorConfig.customPaste = (editor, event) => {const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本// 同步editor.insertText(text);// 阻止默认的粘贴行为event.preventDefault();return false}

3.完整代码

//wangEditor配置项const {createEditor, createToolbar} = window.wangEditorconst editorConfig = {MENU_CONF: {},placeholder: 'Type here...',onChange(editor) {const html = editor.getHtml()//console.log(html);}}//默认粘帖editorConfig.customPaste = (editor, event) => {const text = event.clipboardData.getData('text/plain') // 获取粘贴的纯文本// 同步editor.insertText(text);// 阻止默认的粘贴行为event.preventDefault();return false}//上传图片editorConfig.MENU_CONF['uploadImage'] = {fieldName: 'file',//后台获取文件方式;server: '?m=Upload&a=uploadDeal&act=wangEditor&fromType=module&token=' + token,maxFileSize: 1 * 1024 * 1024, // 1MallowedFileTypes: ['image/*'],onFailed(file, res) {layer.msg(res.message);},onError(file, err, res) {layer.msg(file.name + err);}}const editor = createEditor({selector: '#editor-container',html: '',config: editorConfig,mode: 'default', // or 'simple'})//工具栏配置项const toolbarConfig = {}toolbarConfig.excludeKeys = ['uploadVideo', 'todo']const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'})

总结

wangEditor富文本编辑器去除复制的Word样式可以实现：

一致性：复制的Word样式可能与编辑器当前的样式不匹配，这会导致文本的外观不一致。为了保持编辑器中文本的一致性，去除复制的Word样式是必要的。
兼容性：Word中的样式可能包含复杂的格式和特殊的标记，这些标记可能在编辑器中不被支持。为了确保复制的文本在编辑器中正常显示，去除复制的Word样式是必要的。
清理冗余代码：Word样式在HTML中通常会生成大量的冗余代码，这可能导致页面加载缓慢和不必要的网络流量。通过去除复制的Word样式，可以帮助减少冗余代码，提高页面加载速度。

综上所述，去除复制的Word样式可以提高文本的一致性、兼容性，并优化页面加载效果。

@漏刻有时

wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)相关推荐

wangeditor富文本编辑器上传图片以及跨域问题解决
一.简介 wangeditor富文本编辑器是由js和css开发的富文本编辑器,轻量.简洁.高效详细信息可以查看官网:http://www.wangeditor.com/ 二.上传图片本章内容主要讲 ...
wangeditor富文本编辑器的使用（超详细）
一.基本介绍官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...
wangEditor 富文本编辑器使用
wangEditor 富文本编辑器使用框架: react hooks 链接: 官方文档参考富文本编辑器组件 import '@wangeditor/editor/dist/css/style.cs ...
react html编辑器,wangEditor富文本编辑器+react+antd的使用
搜索热词 1.github上发现富文本编辑器: 2.结合react+antd的具体使用: 案例使用场景:MyModal为弹窗,弹窗显示编辑名称及描述.描述使用wangeditor富文本编辑器实现. ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...

wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)

wangEditor富文本编辑器：自定义粘贴，去除复制word或网页html冗余样式代码的解决方案

1.环境说明

2.解决方案

3.完整代码

总结

wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)相关推荐

最新文章

热门文章