vuecli中使用ueditor富文本

在vuecli中使用ueditor(点击进入官网)富文本

废话不多说，上代码

1.下载vue-ueditor-wrap:

npm install vue-ueditor-wrap -S

2.点击下载ueditor官方提供的压缩包：
我下载的是1.4.3.3jsp版本的

3.查看了资料有两种方式，一种是将ueditor解压后的文件放在static,一种是放在public中，使用vue2.0是放在static,3.0放在public中，我现在是放在了public中，如下图：

如果是放在static中，在src目录下，创建一个static文件夹就可以了。

3.引用组件、注册组件

html

<!-- 富文本 -->
<vue-ueditor-wrap v-model="msg" :config="myConfig"></vue-ueditor-wrap>

js

import VueUeditorWrap from "vue-ueditor-wrap"
export default {
  data() {
    return {
      msg:'<h2>我是富文本内容</h2>',
      myConfig: {
        // 编辑器不自动被内容撑高
        autoHeightEnabled: false,
        // 初始容器高度
        initialFrameHeight: 240,
        // 初始容器宽度
        initialFrameWidth: "100%",
        UEDITOR_HOME_URL: "/UEditor/",
        serverUrl: ""
      }
    };
  },
  components: {
    VueUeditorWrap
  }
};