vue项目中使用富文本编辑器（wangEditor）

1、新建wangEditor组件

<template>
  <div class="editor-wang">
    <div id="wangEditor"></div>
  </div>
</template>
 
<script>
// 引入 wangEditor
import wangEditor from "wangeditor";
export default {
  data() {
    return {
      editor: null,
      editorData: ``,
    };
  },
  props: {
    editorDetail: String,
  },
  mounted() {
    const editor = new wangEditor(`#wangEditor`);
    // 配置 onchange 回调函数，将数据同步到 vue 中
    editor.config.onchange = (newHtml) => {
      this.editorData = newHtml;
    };
    editor.config.uploadImgServer = "https://www.gkh0305.top:8081/uploads";
    editor.config.uploadFileName = "uploadFiles";
    editor.config.uploadImgMaxSize = 5 * 1024 * 1024; // 5M
    // 创建编辑器
    editor.create();
    this.editor = editor;
    
    setTimeout(()=>{
      this.editor.txt.html(this.editorDetail);
    },1000)
  },
  methods: {
    getEditorData() {
      // 通过代码获取编辑器内容
      let data = this.editor.txt.html();
      return data;
    },
  },
 
  beforeDestroy() {
    // 调用销毁 API 对当前编辑器实例进行销毁
    this.editor.destroy();
    this.editor = null;
  },
};
</script>

2、使用组件

<editor-wang class="editor" :editorDetail="user_detail" ref="editor" ></editor-wang>

3、获取富文本编辑器内容

this.user_detail = this.$refs.editor.getEditorData();

最后

以上就是甜美钢笔为你收集整理的vue项目中使用富文本编辑器（wangEditor）的全部内容，希望文章能够帮你解决vue项目中使用富文本编辑器（wangEditor）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。