wangeditor富文本编辑器的复制word到浏览器发生乱码

使用编辑器出现复制word里文本，会携带style样式到浏览器中出现乱码

展示的效果并不是想要的

通过添加

editor.customConfig.pasteFilterStyle = false; //手动关闭掉粘贴样式的过滤

就可以完美解决此问题

若出现报错 property 'pasteFilterStyle' of undefined
则可以通过重新安装wangeditor解决问题

npm install wangeditor

另附我的封装代码

<template ><div><div ref="editor" class="editor"></div></div>
</template>
<script>
import E from "wangeditor";
export default {name: "editor",data() {return {currentValue: this.value};},model: {prop: 'value',event: 'change'},props: {value: {type: String,default:''}},methods: {},watch: {value: function(val, oval) {this.currentValue = val;this.editor.txt.html(this.currentValue);}},mounted() {var editor = new E(this.$refs.editor);this.editor = editor;editor.customConfig.uploadImgShowBase64 = false;editor.customConfig.uploadImgServer =process.env.VUE_APP_BACKEND_URL_PROXY + "/file/upload";editor.customConfig.uploadImgHeaders = {}; // 自定义 headereditor.customConfig.uploadFileName = "filedata";editor.customConfig.uploadImgMaxSize = 5 * 1024 * 1024;editor.customConfig.uploadImgMaxLength = 6;editor.customConfig.uploadImgTimeout = 3 * 60 * 1000;editor.customConfig.pasteFilterStyle = false; //手动关闭掉粘贴样式的过滤// 配置菜单editor.customConfig.menus = ["head", // 标题"bold", // 粗体"fontSize", // 字号"fontName", // 字体"italic", // 斜体"underline", // 下划线"strikeThrough", // 删除线"foreColor", // 文字颜色"backColor", // 背景颜色"link", // 插入链接"list", // 列表"justify", // 对齐方式"quote", // 引用//"emoticon", // 表情"image", // 插入图片//"table", // 表格//"video", // 插入视频//"code", // 插入代码"undo", // 撤销"redo", // 重复"fullscreen" // 全屏];editor.customConfig.uploadImgHooks = {fail: (xhr, editor, result) => {// 插入图片失败回调},success: (xhr, editor, result) => {// 图片上传成功回调},timeout: (xhr, editor) => {// 网络超时的回调},error: (xhr, editor) => {// 图片上传错误的回调},customInsert: (insertImg, result, editor) => {// 图片上传成功，插入图片的回调const url =this.__ftpPath +result.data.filePath;insertImg(url);}};editor.customConfig.onchange = html => {this.currentValue = html;this.$emit("change", html); // 将内容同步到父组件中};editor.customConfig.customAlert = info => {this.$message.error(info);};editor.create();this.editor.txt.html(this.currentValue);}
};
</script>
<style>
.editor {width: 100%;height: 100%;margin: 0 auto;position: relative;z-index: 0;
}
.w-e-text-container{height: 95%!important;}
</style>

wangeditor富文本编辑器的复制word到浏览器发生乱码相关推荐

富文本编辑器粘贴复制Word
公司做的项目需要用到粘贴Word功能.就是将word内容一键粘贴到网页编辑器(在线富文本编辑器)中.Chrome+IE默认支持粘贴剪切板中的图片,但是我要粘贴的文章存在word里面,图片多达数十张,我 ...
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴，去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器:自定义粘贴,去除复制word或网页html冗余样式代码的解决方案 1.环境说明 2.解决方案 3.完整代码总结在使用wangEditor富文本编辑器时,当从wor ...
css wangeditor 修改_内容复制到wangEditor富文本编辑器样式排版错误重置方法
从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误解决方案从网站或者其他地方复制内容到wangEditor富文本编辑器样式排版错误,粘贴到wangEditor时鼠标右击选择&q ...
【wangEditor富文本编辑器】富文本三种使用方法，html使用富文本，html套vue脚手架使用富文本，vue使用富文本【简单易用，复制即用】
前言富文本编辑器功能是很多人都要使用的市面上有很多的编辑器可以供选择,但是很多编辑器会有点复杂,或者文档看起来难受. 我最近做了一个需求,是需要在html文件上写富文本编辑器. 但是我看了以前用的 ...
集成wangEditor富文本编辑器
以下是JavaWeb项目集成wangEditor富文本编辑器,wangEditor是一个轻量级的富文本编辑器,优点是:集成速度快,容易上手.缺点是:相对于百度Ue功能较少,不过也基本满足了我们所需的功 ...
wangeditor富文本编辑器的使用（超详细）
一.基本介绍官方文档:http://www.wangeditor.com/ 1.wangeditor富文本编辑器的特点基于javascript和css开发的 Web富文本编辑器, 轻量.简洁.易用 ...
wangeditor富文本编辑器集成配置
wangeditor富文本编辑器集成 <!DOCTYPE html> <html><head><meta charset="utf-8"& ...
更加简洁易用——wangEditor富文本编辑器新版本发布
1. 前言 wangEditor富文本编辑器(www.wangEditor.com)从去年11月份发布,至今已经有将近10各月了.它就像一个襁褓中的小婴儿,在我的努力以及众多使用者的支持下不断摸索.成 ...
wangEditor富文本编辑器使用、编辑器内容转json格式
wangEditor富文本编辑器好处:可以吧文本编辑器中的内容转成json格式,方便app.小程序使用 wangEditor官网 wangEditor官方文档 wangEditor官方下载下载好之后 ...
「newbee-mall新蜂商城开源啦」页面优化，最新版 wangEditor 富文本编辑器整合案例...
在开源项目达到一定规模时,社区就会给出非常多的反馈,想要开源保持长久的生命力和正向的影响力,定期维护和更新是十分必要的.同时,从另一个角度来说,这也是对该开源项目使用者负责. 1 新蜂商城开源项目的重 ...

wangeditor富文本编辑器的复制word到浏览器发生乱码

wangeditor富文本编辑器的复制word到浏览器发生乱码

展示的效果并不是想要的

wangeditor富文本编辑器的复制word到浏览器发生乱码相关推荐

最新文章

热门文章