在使用wangEditor富文本编辑器时，当从word文档或者其他网页复制文本内容粘贴到编辑器中，如果不过滤掉复制文本中自带的样式，会导致复制的内容比较错乱，甚至无法添加到数据库中。为了解决这个问题，我们需要对从word中粘贴的内容进行处理，把多余的代码剔除，让粘贴后的文本变得更加简洁和轻量。
1.环境说明
- wangEditor，V5版本；
- 编辑器配置参数：customPaste，即自定义粘贴，可阻止编辑器的默认粘贴，实现自己的粘贴逻辑。
- 使用说明，传送门
editorConfig.customPaste = (editor, event) => { // const html = event.clipboardData.getData('text/html') // 获取粘贴的 html const 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.wangEditor const 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, // 1M allowedFileTypes: ['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样式可以提高文本的一致性、兼容性，并优化页面加载效果。
@漏刻有时
