1.效果
2.注意:我下载的3.0版本
3.组件(在components文件里创建一个wangEditoe.vue文件)
<template lang="html">
<div class="editor">
<div ref="toolbar" class="toolbar">
</div>
<div ref="editor" class="text" :style="{minHeight:h,width:w}">
</div>
</div>
</template>
<script>
import E from "wangeditor";
import {
imgUrl } from "@/api/allApi.js";
import {
getToken } from "@/utils/auth";
export default {
name: "editor",
props: {
w: {
type: String,
default:'100%'
},
h: {
type: String,
default:'600px'
},
value: {
type: String,
default: "",
},
isClear: {
type: Boolean,
default: false,
},
},
data() {
return {
getToken: getToken(),
action: imgUrl + "接口地址",
// uploadPath,
editor: null,
info_: null,
menus: [
"head", // 标题
"bold", // 粗体
"fontSize", // 字号
"fontName", // 字体
"italic", // 斜体
"underline", // 下划线
"strikeThrough", // 删除线
"foreColor", // 文字颜色
"backColor", // 背景颜色
"link", // 插入链接
"list", // 列表
"justify", // 对齐方式
"quote", // 引用
"emoticon", // 表情
"image", // 插入图片
"table", // 表格
"code", // 插入代码
"video",
"undo", // 撤销
"redo", // 重复
"fullscreen", // 全屏
],
};
},
model: {
prop: "value",
event: "change",
},
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);
}
},
//value为编辑框输入的内容,这里我监听了一下值,当父组件调用得时候,如果给value赋值了,子组件将会显示父组件赋给的值
},
computed: {
},
mounted() {
this.seteditor();
this.editor.txt.html(this.value);
},
methods: {
handleRemove(file, fileList) {
this.emitInput(fileList);
},
seteditor() {
this.editor = new E(this.$refs.toolbar, this.$refs.editor);
this.editor.customConfig = this.editor.customConfig
? this.editor.customConfig
: this.editor.config;
this.editor.customConfig.menus = this.menus;
// 上传图片
this.editor.customConfig.uploadImgShowBase64 = false; //如果为true,则不用配置下面的
// 配置服务器端地址 upload:上传图片地址
this.editor.customConfig.uploadImgServer = this.action; // 这是服务器端上传图片的接口路径
this.editor.customConfig.uploadFileName = "file"; // 后端接受上传文件的参数名
this.editor.customConfig.uploadImgHeaders = {
Authorization: this.getToken,
}; // 设置请求头
console.log("请求", this.editor.customConfig);
//可使用监听函数在上传图片的不同阶段做相应处理
this.editor.customConfig.uploadImgHooks = {
//服务器端返回的必须是一个 JSON 格式字符串!!!否则会报错
customInsert: function (insertImg, result, editor) {
if (result.code == 200) {
const link = result.data;
// 图片上传并返回结果,自定义插入图片的事件(而不是编辑器自动插入图片!!!)
// insertImg 是插入图片的函数,editor 是编辑器对象,result 是服务器端返回的结果
// 举例:假如上传图片成功后,服务器端返回的是 {url:'....'} 这种格式,即可这样插入图片:
insertImg(link); // result 必须是一个 JSON 格式字符串!!!否则报错
} else {
this.$message({
message: result.message,
type: "warning",
});
}
},
};
//上传视频
// 配置服务器端地址 upload:上传图片地址
this.editor.customConfig.uploadVideoServer = this.action;//请求地址
this.editor.customConfig.uploadVideoHeaders = {
Authorization: this.getToken,
}; // 自定义 header
this.editor.customConfig.uploadVideoName = "file";
//可使用监听函数在上传图片的不同阶段做相应处理
this.editor.customConfig.uploadVideoHooks = {
customInsert: function (insertVideo, result, editor) {
var url = result.data; //获取后台返回的url
console.log("视频", insertVideo, result, editor);
if (result.code == 200) {
const link = result.data;
insertVideo(link);
} else {
this.$message({
message: result.message,
type: "warning",
});
}
},
};
// 配置菜单
//连接
(this.editor.customConfig.linkCheck = function (text, link) {
console.log("插入的文字", text); // 插入的文字
console.log("插入的链接", link); // 插入的链接
return true; // 返回 true 表示校验成功
// return '验证失败' // 返回字符串,即校验失败的提示信息
}),
(this.editor.customConfig.onchange = (html) => {
this.info_ = html; // 绑定当前逐渐地值
this.$emit("change", this.info_); // 将内容同步到父组件中
});
// 创建富文本编辑器
this.editor.create();
},
},
};
</script>
<style lang="css">
.videoWarp {
display: flex;
justify-content: flex-end;
}
.warp {
display: inline-block;
position: relative;
top: 42px;
/* left: 98px; */
z-index: 100000;
width: 67px;
height: 36px;
border: 1px border #dee5ed;
/* background-color: #409EFF; */
/* color: white; */
font-weight: bold;
border-radius: 10px 10px;
}
.editor {
width: 90%;
/* margin: 0 auto; */
position: relative;
z-index: 0;
}
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
min-height: 500px;
}
</style>
3.引入
<template>
<div>
<editor-bar v-model="description" :isClear="isClear" @change="changeImg"></editor-bar>
</div>
</template>
<script>
import EditorBar from '@/components/wangEditor.vue'//wangEditro
export default {
components:{
EditorBar },
data(){
return{
isClear:false,
}
},
methods:{
changeImg(e){
console.log('上传',e);
}
}
}
</script>
<style lang='css'>
.editor {
width: 90%;
/* margin: 0 auto; */
position: relative;
z-index: 0;
}
.toolbar {
border: 1px solid #ccc;
}
.text {
border: 1px solid #ccc;
min-height: 500px;
}
</style>