新手如何在Vue項目中優雅的使用UEditor（百度富文本編輯器）

1、去官網，下載ueditor，解壓，重命名，放在vue項目中的static文件夾下。

　　ps：新手會覺得在官網上有幾種不同版本的文件，俺到底要下載哪一個，如果你僅僅是一個前端，那么好，只要是最新版本的UEditor，隨便下，如果你比較負責，問問你后端同事用什么語言寫后端的，那就用什么版本的，其實不同語言的功能都一樣，只是為了方便給后面圖片上傳的配置提供方便。

官網鏈接：http://ueditor.baidu.com/website/download.html

 

 

 

UEditor目錄如下所示：

 

 

2、在main.js中引入：

import '../static/utf8-jsp/ueditor.config.js'
import '../static/utf8-jsp/ueditor.all.min.js'
import '../static/utf8-jsp/lang/zh-cn/zh-cn.js'
import '../static/utf8-jsp/ueditor.parse.min.js'

 

3、創建自己的UE組件界面：

把如下代碼放到新建的UE.vue文件中即可。

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

4、引入組件，注冊組件，使用子組件。

　　引入：

　　import UE from "../components/UE"

　　注冊為局部組件：

　　components: {UE},

　　使用子組件：

　　<UE :defaultMsg='content' :config='config' ref="ue"></UE>

　　　　說明：content是組件剛加載完成時的默認內容，config里面是一些相關的配置項。ref的作用是為了父組件能夠調用子組件的方法。示例如下：

        content:'請編輯相關內容',
        config: {
          initialFrameWidth: null,
          initialFrameHeight: 350,
        },        

5、此時此刻，啟動。如果你看到如下內容，ok-》你成功了，趕快喝杯咖啡慶祝一下。

 

 6、這時候，你作為前端需要配置一下UE/ueditor.config.js中的window.UEDITOR_HOME_URL，將其改寫為：

window.UEDITOR_HOME_URL = "/static/UE/";

示例如下：

 

7、這時候的控制台會有如下提示：

 

 好了，你如果只搞前端，去把你們后端牽過來，你可以品杯可樂並安慰一下他：“慢慢來不急”。