vue中使用wangEditor文本编辑器

最近写了一个后台管理项目中需要进行文本，在网上百度一下发现了wangEditor这个编辑器挺不错的。

<template>
  <!-- 富文本组件 -->
  <div id="editor"></div>
</template>

	data() {
	        return {
	            editor: '',  // 存放实例化的wangEditor对象，在多个方法中使用
	        }
	    },
	    props:["getText", "richType"],
	    watch: {
	        getText() {
	            this.editor.txt.text(this.getText)
	        }
	    },
	    mounted() {
	    	let that = this;
	        let E = window.wangEditor;
	        let editor = new E('#editor');
	        this.editor = editor;
	        editor.customConfig.zIndex = 100;		// 设置文本编辑器的层级
	        editor.customConfig.menus = [			// 设置文本编辑器的基本菜单
	            'head',  // 标题
	            'bold',  // 粗体
	            'fontSize',  // 字号
	            'fontName',  // 字体
	            'italic',  // 斜体
	            'underline',  // 下划线
	            'strikeThrough',  // 删除线
	            'foreColor',  // 文字颜色
	            'backColor',  // 背景颜色
	            // 'link',  // 插入链接
	            'list',  // 列表
	            'justify',  // 对齐方式
	            'quote',  // 引用
	            // 'emoticon',  // 表情
	            'image',  // 插入图片
	            // 'table',  // 表格
	            // 'video',  // 插入视频
	            // 'code',  // 插入代码
	            'undo',  // 撤销
	            'redo'  // 重复
	        ];
	        // editor.customConfig.uploadImgShowBase64 = true;		// 上传图片是否使用默认base64位， 坑，最好不要使用
	        editor.customConfig.uploadImgServer = sessionStorage.getItem("baseURL") + '/news/material_upload';	// 上传的后台写的接口
	        editor.customConfig.customUploadImg = (files, insert) => {	// 通过API调用后台接口上传图片，返回一个链接给前端塞入文本编辑器
	            const formData = new FormData();
	            formData.append('material', files[0]);
	            window.httpUtil.ajaxPost('/news/material_upload', formData,
	            function httpFailCallback(msg){
	                    alert(msg);
	                },
	                function interfaceSuccCallback(res){
	                    console.log(res, "===>>>res");
	                    insert(res);
	                },
	                function interfaceFailCallback(msg){
	                    alert(msg);
	                },this)
	        };
	        // editor.customConfig.showLinkImg = true;		// 是否可以网络图片上传
	        // editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024		// 设置上传的图片的大小
	        editor.customConfig.onchange = function (html) {		// 修改文本编辑的内容调用的方法
	            that.getEditorContent();
	        }
	        // editor.customConfig.onchangeTimeout = 10000;
	        editor.create();		// 创建文本编辑器
	    }
 		

上面创建文本编辑器的对象，我们可以通过获取$textElem方法来获取编辑的内容

getEditorContent(){  // 获取编辑器 内容区内容
            let text;
            if (this.richType == "text") {
                console.log("text")
                text = this.editor.$textElem.text();  // 获取纯文本
            } else if (this.richType == "html") {
                text = this.editor.$textElem.html();  // 获取html格式
            } else if (this.richType == "forText") {
                text = this.editor.$textElem.formatText();  // 获取格式纯文本
            }
            this.$emit("editorContent", text);
        },

上面就是wangEditor的基本使用