wangeditor富文本编辑器

<template>
	<div id="editor"></div>
</template>

<script>
import Editor from "wangeditor"
	export default {
		data(){
			return {
				myEditor:null,
				serverIP: "http://localhost:3001"
				//设置一个服务器端口
			}
		},
		mounted() {
		    this.myEditor = new Editor("#editor");
		    //创建一个富文本编辑器
		    this.myEditor.config.menus = [
		    //配置菜单，列表中的都是显示的
		      "head",// 标题
		      "bold",// 粗体
		      "fontSize",// 字号
		      "fontName",// 字体
		      "italic", // 斜体
		      "underline",
		      "strikeThrough",
		      "indent",
		      "lineHeight",
		      "foreColor",
		      "backColor",
		      "link",
		      "list",
		      "todo",
		      "justify",
		      "quote",
		      "emoticon",
		      "image",
		      "video",
		      "table",  //表格
		      "code",           //代码
		      "splitLine", //分割线
		      "undo", //撤销
		      "redo", //恢复
		    ];
		    this.myEditor.config.uploadImgServer = `${this.serverIP}/upload/img`;
		    //配置上传图片的地址
		    this.myEditor.config.uploadFileName = "mainPic";
		    //配置图片的名称
		    this.myEditor.config.zIndex = 0;
		    //设置富文本编辑器的层级
		    this.myEditor.create();
		    //将富文本编辑器创建在网页之中
		    this.myEditor.config.uploadImgHooks = {
		    // 图片上传并返回了结果，想要自己把图片插入到编辑器中
		      customInsert: (insertImgFn, result) => {
		      //result是图片的地址
		        insertImgFn(`${this.serverIP}${result.file}`);
		        //将图片插入到富文本编辑器之中
		      },
		    };
		  },
	}
</script>