1. wangEditor4介绍
wangEditor4 —— 轻量级 web 富文本编辑器，配置方便，使用简单。支持 IE10+ 浏览器。
2. 下载
注意： wangeditor都是小写字母
npm install wangeditor
3. 定义编辑器子组件
-
创建富文本编辑器子组件 editor.vue
template
<template> <div class="editor" id="box"></div> </template>script
import E from "wangeditor"; export default { data() { return {}; }, mounted() { this.initE(); }, methods: { initE() { this.editor = new E("#box"); //这里各位小伙伴可以查询官网，根据自己的需求进行菜单栏调整 this.editor.config.menus = [ "head", // 标题 "bold", // 粗体 "fontSize", // 字号 "fontName", // 字体 "italic", // 斜体 "underline", // 下划线 "strikeThrough", // 删除线 "foreColor", // 文字颜色 "backColor", // 背景颜色 "link", // 插入链接 "list", // 列表 "justify", // 对齐方式 "quote", // 引用 "emoticon", // 表情 "image", // 插入图片 "table", // 表格 "code", // 插入代码 "undo", // 撤销 "redo", // 重复 ]; //为true，则上传后的图片转为base64编码，为false,则上传图片到服务器，二者不能同时使用 this.editor.config.uploadImgShowBase64 = false; //服务器接收的上传图片的属性名 this.editor.config.uploadFileName = "file"; //服务器上传图片的接口地址 this.editor.config.uploadImgServer = `http://localhost:3000/upload`; // 默认限制图片大小是 5M ，可以自己修改。 this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024; // 2M // 限制类型,可自定义配置,默认为： ['jpg', 'jpeg', 'png', 'gif', 'bmp'] this.editor.config.uploadImgAccept = ['jpg', 'jpeg',"png", "gif", "bmp", "webp"]; //上传图片过程中钩子函数 this.editor.config.uploadImgHooks = { // 上传图片之前 before: function (xhr) { // console.log(xhr); // // 可阻止图片上传 // return { // prevent: true, // msg: "需要提示给用户的错误信息", // }; }, // 图片上传并返回了结果，图片插入已成功 success: function (xhr) { console.log("success", xhr); }, // 图片上传并返回了结果，但图片插入时出错了 fail: function (xhr, editor, resData) { console.log("fail", resData); }, // 上传图片出错，一般为 http 请求的错误 error: function (xhr, editor, resData) { console.log("error", xhr, resData); }, // 上传图片超时 timeout: function (xhr) { console.log("timeout"); }, }; // 在输入内容时，把内容传给父组件 this.editor.config.onchange = (html) => { this.$emit("change", html); // 将内容同步到父组件中 }; this.editor.create(); //初始化富文本编辑器时显示的内容 this.editor.txt.html("<h1>haha</h1>"); }, }, };
4. 图片上传注意事项
4.1 响应数据格式要求
只有响应数据的格式符合下列要求，才会调用success和fail等回调函数
- 响应数据格式
{
// errno 即错误代码，0 表示没有错误。
// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理
"errno": 0,
// data 是一个数组，返回图片Object，Object中包含需要包含url、alt和href三个属性,它们分别代表图片地址、图片文字说明和跳转链接,alt和href属性是可选的，可以不设置或设置为空字符串,需要注意的是url是一定要填的。
"data": [
{
url: "图片地址",
alt: "图片文字说明",
href: "跳转链接"
},
{
url: "图片地址1",
alt: "图片文字说明1",
href: "跳转链接1"
},
"……"
]
}
- 回调函数
//上传图片过程中钩子函数
this.editor.config.uploadImgHooks = {
// 上传图片之前
before: function (xhr) {
// console.log(xhr);
// // 可阻止图片上传
// return {
// prevent: true,
// msg: "需要提示给用户的错误信息",
// };
},
// 图片上传并返回了结果，图片插入已成功
success: function (xhr) {
console.log("success", xhr);
},
// 图片上传并返回了结果，但图片插入时出错了
fail: function (xhr, editor, resData) {
console.log("fail", resData);
},
// 上传图片出错，一般为 http 请求的错误
error: function (xhr, editor, resData) {
console.log("error", xhr, resData);
},
// 上传图片超时
timeout: function (xhr) {
console.log("timeout");
},
};
-
express后端返回示例
//图片上传 router.post("/upload", upload.single("file"), (req, res) => { // 需要返回图片的访问地址 域名+上传文件夹+文件名 const url = "http://localhost:3000/upload/" + req.file.filename res.json({ errno: 0, "data": [ { url, alt: '可爱', href:"http://www.baidu.com" } ] }) })
4.2 响应数据不符合格式要求
-
express后端返回示例
//图片上传 router.post("/upload", upload.single("file"), (req, res) => { // 需要返回图片的访问地址 域名+上传文件夹+文件名 const url = "http://localhost:3000/upload/" + req.file.filename res.json({url}) }) 自定义回调函数，插入图片
customInsert: function (insertImgFn, result) {
//result为上传图片成功的时候返回的数据，这里我打印了一下发现后台返回的是data：[{url:"路径的形式"},...]
// console.log(result.data[0].url)
//insertImgFn()为插入图片的函数
//循环插入图片
// for (let i = 0; i < 1; i++) {
// console.log(result)
let url = "http://localhost:3000/upload/" + result.url;
insertImgFn(url);
}
5. 其它API
- editor.txt.html() 设置编辑器内容。
-
editor.txt.append('<p>追加的内容</p>')继续追加内容。 -
editor.txt.html()获取 html -
editor.txt.clear()清空编辑器内容。
6. 父组件使用富文本编辑器子组件
<template>
<div id="app">
<editor @change="change"></editor>
<button @click="send()">提交</button>
</div>
</template>
<script>
import editor from "@/views/editor.vue";
export default {
components: { editor },
data(){
return {
result: ''
}
},
methods: {
//提交富文本编辑器的内容
send(){
console.log('send',this.result);
},
change(html){
this.result = html
}
}
};
</script>
<style lang="scss">
</style>
