富文本下载使用步骤

  富文本：http://www.wangeditor.com/index.html

一、npm安装

npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap

二、下载文件，vue-ueditor-wrap 作者修定版

（https://github.com/HaoChuan9421/vue-ueditor-wrap/tree/master/assets/downloads）

三、下载完成的压缩包，修改文件名为 ueditor ，并放置项目目录下的public的目录中

四、修改 ueditor 文件中的 ueditor.config.js 配置为：

window.UEDITOR_HOME_URL = '/ueditor/'

五、使用

<template>
  <div>
    <vue-ueditor-wrap class="addtit" v-model="ruleForm.content" :config="ueConfig"></vue-ueditor-wrap>
    <p>{{ruleForm.content}}</p>
  </div>
</template>
<script>
// 引入
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
  // 标识,当前组件的名称
  name: "text_f",
  components: {
    VueUeditorWrap
  },
  data() {
    return {
      ruleForm: {
        content: ""
      },
      ueConfig: {
        // UEditor 资源文件的存放路径，就是放置UEditor的文件路径
        UEDITOR_HOME_URL: "/ueditor/",
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 300,
        // 初始容器宽度
        initialFrameWidth: "100%",
        // 上传文件接口
        enableAutoSave: false,
        // 上传文件接口
        // serverUrl: this.$axios.defaults.baseURL + '/mh/ueditor/config',
        serverUrl: 'http://112.6.99.125:7013/safetyPatrol/mh/ueditor/config',
        elementPathEnable: false,
        wordCount: false
      }
    };
  },
  mounted() {},
  methods: {}
};
</script>

六、.全局注册使用

// 在 main.js 中引入
import VueUeditorWrap from 'vue-ueditor-wrap'

// 全局注册组件
Vue.component('vue-ueditor-wrap', VueUeditorWrap)

// 在组建中直接使用
<vue-ueditor-wrap v-model="msg" :config="config"></vue-ueditor-wrap>

简易富文本：http://www.wangeditor.com/index.html

1、npm安装

npm install wangeditor

 2、引入

import Editor from "wangeditor";

3、使用

<template>
    <div>
        <div ref="editorDom"></div>
    </div>
</template>
<script>
// 引入
import Editor from "wangeditor"
export default {
  // 标识,当前组件的名称
  name: "text_f",
  data() {
    return {
        editor:null
    };
  },
  mounted(){      
      this.createEditor()
  },
  methods: {
    //   创建富文本对象
    createEditor(){
        this.editor = new Editor(this.$refs.editorDom);
        this.editor.customConfig.onchange = html => {};
        // 创建富文本实例
        this.editor.create(); 
    }
  }
};
</script>