在使用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样式可以提高文本的一致性、兼容性,并优化页面加载效果。文章来源:https://www.toymoban.com/news/detail-563048.html
@漏刻有时文章来源地址https://www.toymoban.com/news/detail-563048.html
到了这里,关于wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!