vue使用UEditor富文本

1.安装vue-ueditor-wrap 依赖
2.ueditor下载完以后解压，把文件夹名字改为Ueditor。
如果是vue-cli2构建的项目，把UEditor文件夹放在static文件夹下，
如果是vue-cli3构建的项目就放在public文件夹下。

vue-ueditor-wrap插件可以让ueditor使用v-model实现数据双向绑定。
npm i vue-ueditor-wrap

//使用教程

// 在要使用ueditor编辑器页面引用组件

import VueUeditorWrap from 'vue-ueditor-wrap'

// 注册组件

components: { VueUeditorWrap }

// 使用组件

<vue-ueditor-wrap v-model="content"></vue-ueditor-wrap>

语言版本:不同语言版本不同根据需求来使用

文件目录

大概介绍一下：
文件夹dialogs：弹窗插件，例如上传图片时候的弹窗；
文件夹jsp：jsp版本上传功能的相关jar以及配置文件；
文件夹lang：语言；
文件夹themes：主题风格，可以选择不同的风格；
文件夹third-party：第三方插件，例如插入代码，代码高亮等；
ueditor.all.js：ueditor核心js，源代码；
ueditor.all.min.js：ueditor核心js，压缩后代码；
ueditor.config.js：默认配置文件；
ueditro.parse.js：文本渲染js，例如插入一段代码后，代码高亮的显示需要该js。

3.全局或者局部注册组件

我这里采用的全局注册 main.js

import VueUeditorWrap from 'vue-ueditor-wrap'

Vue.component('vue-ueditor-wrap', VueUeditorWrap)

组件

<template>
  <div>
    {{msg}}
    <vue-ueditor-wrap ref="editor"
                      v-model="msg"
                      :config="ueConfig"></vue-ueditor-wrap>
  </div>
</template>
<script>
export default {
  name: "TextUeditor",
  data () {
    return {
      msg: '',
      ueConfig: {
        autoHeightEnabled: true, // 自动变高
        autoFloatEnabled: true,
        initialContent: '请输入内容',
        autoClearinitialContent: true,
        initialFrameWidth: '50%', // 初始化宽
        initialFrameHeight: 200, // 初始化高
        BaseUrl: '',
        // 上传文件接口（） - 修改成自己后端地址
        serverUrl: '',
        // UEditor 资源文件的存放路径
        UEDITOR_HOME_URL: '/UEditor/', // 重要重要重要重要重要重要重要重要重要 必须配置好路径!!!
      },
    };
  },
  mounted () {

  },
  methods: {

  }
};
</script>

其他配置

搜索并将参数elementPathEnabled设置成false即可
常用功能开关如下：
elementPathEnabled : false　　//是否启用元素路径，默认是true显示
wordCount:false          //是否开启字数统计
autoHeightEnabled:false　　// 编辑器内容，是否自动长高,默认true
fullscreen : false //是否开启初始化时即全屏，默认关闭
zIndex : 900     //编辑器层级的基数,默认是900（一般不要开启，会对项目层级有影响）