vue项目中使用wangeditor , word中粘贴的文字,会把style标签贴过来
这个style样式也有问题 , 找不到原因,下面是我配置文件 ,设置关闭粘贴样式过滤 也没有效果
<template>
<div class="wang-editor">
<div ref="toolbar" class="toolbar"></div>
<div ref="editor" class="text"></div>
</div>
</template>
<script>
import E from "wangeditor";
// import "wangeditor/release/wangEditor.min.css";
export default {
name: "wangEditor",
data() {
return {
editor: null,
isChange: false,
};
},
props: {
contentDefault: {
type: String,
default: "",
},
enable: {
//控制编辑器是否能编辑
type: Boolean,
default: true,
},
isRequestSign: {
type: [String, Number],
defalut: 0
},
respondentSign: {
type: String,
default: "",
},
applicantSign: {
type: String,
defalut: ''
}
},
watch: {
contentDefault(value) {
if (!this.isChange) {
this.editor.txt.html(value);
}
this.isChange = false;
},
},
mounted() {
this._setEditor();
},
methods: {
_setEditor() {
this.editor = new E(this.$refs.toolbar, this.$refs.editor);
this.editor.config.pasteFilterStyle = false //关闭粘贴样式过滤 也没有效果
this.editor.config.onchange = (html) => {
this.isChange = true;
this.$emit("update:contentDefault", html); // 把这个html传入父组件
};
this.editor.config.menus = [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"image", // 插入图片
"video", // 插入视频
"quote", // 引用
"table", // 表格
"code", // 插入代码
"undo", // 撤销
"redo", // 重复
];
// 自定义字体
this.editor.config.fontNames = [
'宋体',
'仿宋',
'微软雅黑',
'Arial',
'Tahoma',
'Verdana'
];
// 字号
this.editor.config.fontsizes = {
'x-small': {
name: '10px',
value: '1',
},
small: {
name: '13px',
value: '2',
},
normal: {
name: '16px',
value: '3',
},
large: {
name: '18px',
value: '4',
},
'x-large': {
name: '24px',
value: '5',
},
'xx-large': {
name: '32px',
value: '6',
},
'xxx-large': {
name: '48px',
value: '7',
}
};
this.editor.create();
//是否可以编辑
this.editor.txt.html(this.contentDefault);
if (this.respondentSign) {
let data = this.respondentSign.split(",")
let newData = data.map(element => {
return {
src: element
}
})
let appendContent =
`<p>被申请人签字:${newData.reduce((str, item) => str + `<img contenteditable="false" src='${item.src}'/>`, '')}</p>`
this.editor.txt.append(appendContent)
}
if (this.applicantSign) {
let data = this.applicantSign.split(",")
let newData = data.map(element => {
return {
src: element
}
})
let appendContent =
`<p>申请人签字:${newData.reduce((str, item) => str + `<img contenteditable="false" src='${item.src}'/>`, '')}</p>`
this.editor.txt.append(appendContent)
}
this.enable = this.isRequestSign ? false : true
this.editor.$textElem.attr("contenteditable", this.enable);
},
},
};
</script>
<style lang="scss" scoped>
@import "style/quill-base.scss";
/deep/ .w-e-text img {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
/* 以下两个属性目前并未支持,写在这里为了减少风险 */
-o-user-select: none;
user-select: none !important;
cursor: inherit;
&:hover {
background: inherit !important;
box-shadow: inherit !important;
}
}
</style>
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论