Vue项目中-富文本编辑器的简单使用

1、安装依赖

cnpm i wangeditor --save

2、组件中的基本使用

1）准备 dom

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

2）在组件中导入

import Editor from "wangeditor"

2）在 mounted() 中使用

// 这里在 data() 中声明了一个 editor
data () {
	return {
		editor: null,
		serverIp: 'http://localhost:3000',
		goods: {
			mainPic: []
		}
	}
}

mounted: {
	// 首次操作dom 在这里
	// 富文本编译
	// 拿到dom 元素
	this.editor = new Editor("#editor");
	
	// 添加配置项，必须在 create() 方法之前配置
	// 0-设置 zindex
	this.editor.config.zIndex = 0;
	// 1-设置编辑区域高度为 200px
	this.editor.config.height = 200;
	// 2-默认情况下，显示所有菜单
	this.editor.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',
    ];
    // 3-配置上传图片
    // 3-1 配置上传服务器接口
    this.editor.config.uploadImgServer = this.serverIp + "/upload/img";
    // 3-2 配置上传字段名
    this.editor.config.uploadFileName = "mainPic";
    // 3-3 图片上传的钩子函数
    this.editor.config.uploadImgHooks = {
      // 图片上传并返回了结果，想要自己把图片插入到编辑器中
      customInsert: (insertImgFn, result) => {
        // 用箭头函数解决 this 指向问题
        // result 即服务端返回的接口
        // console.log("customInsert", result);

        // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
        insertImgFn(`${this.serverIp}${result.file}`);
      },
    };

    this.editor.create(); // 调用 create() 方法
}

---

使用的富文本编辑器，官网wangEditor

———————————————————
“红绳牵不动核桃，簪子上雕刻一朵牡丹”