百度富文本编辑器文档：http://fex.baidu.com/ueditor/#start-config
下载ueditor官网：https://ueditor.baidu.com/website/download.html

下面我们先在html中引用百度编辑器
1.在html中引入

    <!-- 配置文件 -->
   <script type="text/javascript" src="ueditor.config.js"></script>

   <!-- 编辑器源码文件 -->
   <script type="text/javascript" src="ueditor.all.js"></script>
    <!-- 语言文件 -->
   <script type="text/javascript" charset="utf-8" src="lang/zh-cn/zh-cn.js"></script>

2.在body中加富文本编辑器的容器，并初始化

<!-- 加载编辑器的容器 -->
    <script id="container" name="content" type="text/plain">
        我的初始化
    </script>
  <!-- 在script中初始化 -->
<!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container',{
            serverUrl:"http://test.io/php/controller.php?action=config"//这里是上传图片后端处理文件地址（自行替换），如果不使用图片上传，则不需要配置
        });
    </script>

3.此时如果后端配置好了，就已经可以使用了,后端需要修改上传限制以及上传返回路径
举例子：

{
    "imageUrlPrefix": "http://test.io", /* 图片访问路径前缀 ,加入以后获取富文本编辑器内容时，图片地址会以这个前缀开头*/
    "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* 这是上传后的路径*/

4.最后放到服务器的样式：（其中图片是我自己在编辑器页面加入的）

微信图片_20190306162116.png

vue中使用ueditor

1.先下载富文本编辑器，并将所需要的文件放到指定文件夹中，我 是放在plugins中.

image.png

这里需要注意，在开发的时候如果开启了webpack-dev-server,在开发的时候可能是显示的，但是打包以后到生产环境的时候会找不到dialog等文件，需要你在webpack.config.prod.js文件中修改，加入CopyWebpackPlugin插件，将plugins中文件复制到对应目录dist/js目录下：

 new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new CopyWebpackPlugin([
      {
        from: path.join(__dirname, './src/plugins/ueditor'),
        to: path.join(__dirname,"./dist/js/"),
        ignore: ['.*']
      }
    ]),

2.在入口文件中导入我们需要的文件，我这里是main.js

// 导入编辑器
import './plugins/ueditor/ueditor.config.js'
import './plugins/ueditor/ueditor.all.js'
import './plugins/ueditor/lang/zh-cn/zh-cn.js'
import './plugins/ueditor/ueditor.parse.js'

3.为了多次使用富文本编辑器，我们使用vue的组件

<template>
  <div class="editor-box">
    <script id="editor" type="text/plain"></script>
  </div>
</template>
<script>
  export default {
    name: 'UE',
    data () {
      return {
        editor: null
      }
    },
    props: {
      defaultMsg: {
        type: String
      },
      config: {
        type: Object
      }
    },
    mounted() {
      const _this = this;
      this.editor = UE.getEditor('editor', this.config); // 初始化UE
      this.editor.addListener("ready", function () {
        _this.editor.setContent(_this.defaultMsg); // 确保UE加载完成后，放入内容。
      });
    },
    methods: {
      getUEContent() { // 获取内容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>
<style>
.editor-box{
    padding: 0 40px;
}

</style>

4.在所需的页面中导入组件

<template>
    <div>
              <div class="editor-container">
                  <UE :defaultMsg='defaultMsg' :config='config' ref="ue"></UE>
              </div>
     </div>
<template>
<script>
import UE from '../../../components/subcom/ueditor.vue';
  export default {
  components: {
        UE
    },
    data () {
      return {
        defaultMsg:'测试',
            config:{
                serverUrl:"http://test.io/php/controller.php?action=config",
                autoHeightEnabled: true,
                autoFloatEnabled: true
            },
      }
    },
  
    mounted() {
     this.$refs.ue.style="width:auto";
    },
    methods: {

    },

  }
</script>
<style>

</style>

这是我自己的项目中显示的富文本编辑器

image.png