百度富文本編輯器文檔：http://fex.baidu.com/ueditor/#start-config
下載ueditor官網(wǎng)：http://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中初始化 -->
<!-- 實(shí)例化編輯器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container',{
            serverUrl:"http://test.io/php/controller.php?action=config"http://這里是上傳圖片后端處理文件地址（自行替換），如果不使用圖片上傳，則不需要配置
        });
    </script>

3.此時(shí)如果后端配置好了，就已經(jīng)可以使用了,后端需要修改上傳限制以及上傳返回路徑
舉例子：

{
    "imageUrlPrefix": "http://test.io", /* 圖片訪問路徑前綴 ,加入以后獲取富文本編輯器內(nèi)容時(shí)，圖片地址會(huì)以這個(gè)前綴開頭*/
    "imagePathFormat": "/image/{yyyy}{mm}{dd}/{time}{rand:6}",/* 這是上傳后的路徑*/

4.最后放到服務(wù)器的樣式：（其中圖片是我自己在編輯器頁面加入的）

微信圖片_20190306162116.png

vue中使用ueditor

1.先下載富文本編輯器，并將所需要的文件放到指定文件夾中，我 是放在plugins中.

image.png

這里需要注意，在開發(fā)的時(shí)候如果開啟了webpack-dev-server,在開發(fā)的時(shí)候可能是顯示的，但是打包以后到生產(chǎn)環(huán)境的時(shí)候會(huì)找不到dialog等文件，需要你在webpack.config.prod.js文件中修改，加入CopyWebpackPlugin插件，將plugins中文件復(fù)制到對應(yīng)目錄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.在入口文件中導(dǎo)入我們需要的文件，我這里是main.js

// 導(dǎo)入編輯器
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加載完成后，放入內(nèi)容。
      });
    },
    methods: {
      getUEContent() { // 獲取內(nèi)容方法
        return this.editor.getContent()
      }
    },
    destroyed() {
      this.editor.destroy();
    }
  }
</script>
<style>
.editor-box{
    padding: 0 40px;
}

</style>

4.在所需的頁面中導(dǎo)入組件

<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>

這是我自己的項(xiàng)目中顯示的富文本編輯器

image.png

5.這里補(bǔ)充一下，編輯器寬度自適應(yīng)的問題，解決方案就是在config參數(shù)里面修改：initialFrameWidth：'100%'，即可解決自適應(yīng)問題。
6解決自動(dòng)將div轉(zhuǎn)換成p標(biāo)簽，在config參數(shù)里面修改：allowDivTransToP：false，即可解決。