wangEditor写成vue组件并使用 vue 文本编辑组件

wangEditor.vue组件

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

<script>
  import editor from 'wangeditor';
  export default {
    name: 'article-manage',
    data(){
      return{
        nEditor:null,
      }
    },
    mounted() {
      this.nEditor = new editor('#editor');
      this.nEditor.customConfig.onchange = html => {
        this.$emit("getContent",html);
      };
      this.nEditor.customConfig.uploadImgShowBase64 = true; // base 64 存储图片
      this.nEditor.customConfig.menus = [
        //菜单配置
        "head", // 标题
        "bold", // 粗体
        "fontSize", // 字号
        "fontName", // 字体
        "italic", // 斜体
        "underline", // 下划线
        "strikeThrough", // 删除线
        "foreColor", // 文字颜色
        "backColor", // 背景颜色
        "link", // 插入链接
        "list", // 列表
        "justify", // 对齐方式
        "quote", // 引用
        "emoticon", // 表情
        "image", // 插入图片
        "table", // 表格
        // "video", // 插入视频
        "code", // 插入代码
        "undo", // 撤销
        "redo", // 重复
      ];
      this.nEditor.customConfig.uploadImgMaxLength = 1;
      this.nEditor.customConfig.uploadImgServer = '/*   上传图片后台接口   */';
      this.nEditor.create();
      this.creatBtn("#editor");
    },
    methods:{
      // 设置编辑器内容
      setEditorContent(content){
        this.nEditor.txt.html(content);
      },
      // 获取编辑器内容
      getEditorContent(){
        this.$emit("getContent",this.nEditor.txt.html());
      },
      // 添加显示源码按钮
      creatBtn(editorSelector){
        let _this = this;
        function toggleViewsource(editorSelector,that){
          var editorHtml = that.nEditor.txt.html();
          if($(editorSelector + ' ._wangEditor_btn_viewsource').text() == ''){
            editorHtml = editorHtml.replace(/</g, "<").replace(/>/g, ">").replace(/ /g, " ");
            $(editorSelector + ' ._wangEditor_btn_viewsource').addClass('yuanma-active');
            $(editorSelector + ' ._wangEditor_btn_viewsource').text(' ');
          }else{
            editorHtml = that.nEditor.txt.text().replace(/</ig, "<").replace(/>/ig, ">").replace(/ /ig, " ");
            $(editorSelector + ' ._wangEditor_btn_viewsource').removeClass('yuanma-active');
            $(editorSelector + ' ._wangEditor_btn_viewsource').text('');
          }
          that.nEditor.txt.html(editorHtml);
          that.nEditor.change && that.nEditor.change();// 更新编辑器的内容
        }
        $(editorSelector + " .w-e-toolbar").prepend('<div class="w-e-menu"><span class="_wangEditor_btn_viewsource yuanma" href="###"></span></div>');
        $(editorSelector).on("click",".yuanma",function(){
          toggleViewsource(editorSelector,_this);
        });
      },
    },
  }
</script>

<style scoped>
	#editor >>> .yuanma{display: inline-block;width: 14px;height: 14px;background: url(/*   此处放置源码按钮灰色图标   */) no-repeat center center;background-size: contain;}
	#editor >>> .yuanma-active{display: inline-block;width: 14px;height: 14px;background: url(/*   此处放置源码按钮有色图标   */) no-repeat center center;background-size: contain;}
	#editor >>> .yuanma:hover{background: url(/*   此处放置源码按钮有色图标   */) no-repeat center center;background-size: contain;}
</style>

页面中使用的方法：

// 先引入并注册组件
import wangEditor from '@/components/wangEditor';
components: {
  wangEditor
}
// 页面中写入以下标签
<wangEditor ref="wangEditorRef" @getContent="getEditContent" />
// 设置编辑器内容为空或任意值
this.$refs.wangEditorRef.setEditorContent('');
// 获取编辑器中内容
this.$refs.wangEditorRef.getEditorContent();
// 获取编辑器中内容接收方法
methods : {
  getEditContent(content) {
    console.log(content)
  }
}