<template lang="html">
|
<div class="editor">
|
<div ref="toolbar" class="toolbar"></div>
|
<div ref="editor" class="text-wang"></div>
|
</div>
|
</template>
|
|
<script>
|
import E from "wangeditor";
|
export default {
|
name: "editoritem",
|
data() {
|
return {
|
// uploadPath,
|
editor: null,
|
info_: null,
|
url: ""
|
};
|
},
|
model: {
|
prop: "value",
|
event: "change"
|
},
|
props: {
|
value: {
|
type: String,
|
default: ""
|
},
|
isClear: {
|
type: Boolean,
|
default: false
|
},
|
disabled: {
|
type: Boolean,
|
default: false
|
}
|
},
|
watch: {
|
isClear(val) {
|
// 触发清除文本域内容
|
if (val) {
|
this.editor.txt.clear();
|
this.info_ = null;
|
}
|
},
|
value: function(value) {
|
if (value !== this.editor.txt.html()) {
|
this.editor.txt.html(this.value);
|
}
|
},
|
|
disabled: function(value) {
|
console.log(value);
|
|
value ? this.editor.disable() : this.editor.enable();
|
}
|
|
//value为编辑框输入的内容，这里我监听了一下值，当父组件调用得时候，如果给value赋值了，子组件将会显示父组件赋给的值
|
},
|
mounted() {
|
this.seteditor();
|
this.editor.txt.html(this.value);
|
this.url = this.$js.api.http + "communitypartybuilding/uploadimage";
|
console.log(this.disabled);
|
console.log(this.editor);
|
|
this.disabled ? this.editor.disable() : this.editor.enable();
|
},
|
methods: {
|
seteditor() {
|
this.editor = new E(this.$refs.toolbar, this.$refs.editor);
|
this.editor.config.uploadImgShowBase64 = false; // base 64 存储图片
|
// this.editor.config.uploadImgServer = this.$js.api.http + "communitypartybuilding/uploadimage"// 配置服务器端地址
|
// this.editor.config.uploadImgHeaders = {
|
// Authorization :"Bearer " + demo.$session.get("token") || ""
|
// }// 自定义hedaer;
|
|
// this.editor.config.uploadFileName = 'files' // 后端接受上传文件的参数名
|
|
//自定义上传图片参数、实现多图上传
|
this.editor.config.customUploadImg = (files, insert) => {
|
var formData = new FormData();
|
for (var i = 0; i < files.length; i++) {
|
formData.append("file", files[i], files[i].name);
|
}
|
axios
|
.post(this.url, formData, {
|
// 上传图片接口
|
headers: {
|
"Content-Type": "multipart/form-data",
|
Authorization: "Bearer " + demo.$session.get("token") || ""
|
}
|
})
|
.then(da => {
|
if (da.data.code == 200) {
|
insert(da.data.data);
|
// for (var j = 0; j < da.data.data.length; j++) {
|
// insert(da.data.data[j].url);
|
// }
|
} else {
|
demo.toast(da.data.data.msg);
|
return;
|
}
|
});
|
};
|
|
this.editor.config.uploadImgAccept = [];
|
|
this.editor.config.uploadImgMaxSize = 20 * 1024 * 1024; // 将图片大小限制为 2M
|
// this.editor.config.uploadImgMaxLength = 5 // 限制一次最多上传 3 张图片
|
this.editor.config.uploadImgTimeout = 3 * 60 * 1000; // 设置超时时间
|
this.editor.config.showLinkImg = false; //隐藏网络图片功能
|
/** 上传视频 */
|
this.editor.config.uploadVideoServer =
|
this.$js.api.http + "communitypartybuilding/uploadimage";
|
this.editor.config.uploadVideoAccept = ["mp4"]; //视频格式
|
this.editor.config.uploadVideoMaxSize = 1 * 1024 * 1024 * 1024; // 1024m
|
this.editor.config.uploadVideoName = "files";
|
this.editor.config.showLinkVideo = false;
|
this.editor.config.uploadVideoHeaders = {
|
Authorization: "Bearer " + demo.$session.get("token") || ""
|
}; // 自定义hedaer;
|
// 视频上传并返回了结果，想要自己把视频插入到编辑器中
|
// 例如服务器端返回的不是 { errno: 0, data: { url : '.....'} } 这种格式，可使用 customInsert
|
this.editor.config.uploadVideoHooks = {
|
customInsert: function(insertVideoFn, result) {
|
// result 即服务端返回的接口
|
insertVideoFn(result.data);
|
}
|
};
|
// 配置菜单
|
this.editor.config.menus = [
|
"head", // 标题
|
"bold", // 粗体
|
"fontSize", // 字号
|
"fontName", // 字体
|
"italic", // 斜体
|
"underline", // 下划线
|
"strikeThrough", // 删除线
|
"foreColor", // 文字颜色
|
"backColor", // 背景颜色
|
"link", // 插入链接
|
"list", // 列表
|
"justify", // 对齐方式
|
"quote", // 引用
|
"emoticon", // 表情
|
"image", // 插入图片
|
"table", // 表格
|
"video", // 插入视频
|
"code", // 插入代码
|
"undo", // 撤销
|
"redo", // 重复
|
"fullscreen" // 全屏
|
];
|
|
this.editor.config.uploadImgHooks = {
|
fail: (xhr, editor, result) => {
|
// 插入图片失败回调
|
},
|
success: (xhr, editor, result) => {
|
// 图片上传成功回调
|
},
|
timeout: (xhr, editor) => {
|
// 网络超时的回调
|
},
|
error: (xhr, editor) => {
|
// 图片上传错误的回调
|
},
|
customInsert: (insertImg, result, editor) => {
|
// 图片上传成功，插入图片的回调
|
//result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
|
// console.log(result.data)
|
//insertImg()为插入图片的函数
|
//循环插入图片
|
// for (let i = 0; i < 1; i++) {
|
// console.log(result)
|
let url = result.data;
|
insertImg(url);
|
// }
|
}
|
};
|
this.editor.config.onchange = html => {
|
this.info_ = this.$xss_switch.process(html); // 绑定当前逐渐地值
|
this.$emit("change", this.info_); // 将内容同步到父组件中
|
};
|
// 创建富文本编辑器
|
this.editor.create();
|
}
|
}
|
};
|
</script>
|
|
<style lang="css" scope>
|
.editor {
|
width: 100%;
|
margin: 0 auto;
|
position: relative;
|
z-index: 0;
|
}
|
.toolbar {
|
border: 1px solid #ccc;
|
}
|
.text-wang {
|
border: 1px solid #ccc;
|
min-height: 500px;
|
}
|
</style>
|
