基本使用

1.下載資源包

因?yàn)閡editor在npm上暫無官方依賴包，因此需要先到官網(wǎng)下載文件包，我下載的是jsp版本的

2.引入依賴文件

將下載后的文件夾命名為UE，并放入到項(xiàng)目static文件夾中，然后再main.js引入依賴文件（我這里是全局引入，也可以再使用的組件中引入）；

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

3.初始化ueditor

我這里是單獨(dú)將ueditor抽成一個(gè)組件，因此初始化時(shí)的id和配置都是從父組件傳入的。定義組件：

<template>
  <div>
    <script :id=id type="text/plain"></script>
  </div>
</template>
<script>
export default {
  name: 'UE',
  data () {
    return {
      editor: null
    }
  },
  props: {
    config: {
      type: Object
    },
    id: {
      type: String
    },
    content: {
      type: String
    }
  },
  mounted () {
    this._initEditor()
  },
  methods: {
    _initEditor () { // 初始化
      this.editor = UE.getEditor(this.id,this.config)
    },
    getUEContent () { // 獲取含標(biāo)簽內(nèi)容方法
      return this.editor.getContent()
    }
  },
  destroyed () {
    this.editor.destroy()
  }
</script>

4.使用組件：

(1).通過import引入定義好的組件；
import UE from '@/components/ueditor/ueditor.vue'
(2).在對(duì)應(yīng)的位置使用組件

<el-form-item label="文章內(nèi)容" prop="articleContent">
  <UE :id=id :config=config  ref="ue"></UE>
</el-form-item>

(3).在父組件的data中定義初始化配置

// 初始化Ueditor配置參數(shù)
      config: {
        initialFrameWidth: null,
        initialFrameHeight: 300
      },
      id: 'container',// 不同編輯器必須不同的id

(4).在父組件中獲取編輯器內(nèi)容

// 獲取富文本內(nèi)容
    getEdiotrContent () {
      let content = this.$refs.ue.getUEContent() // 調(diào)用子組件方法
      this.articleData.articleContent = content
    }

使用配置

如果需要使用到圖片上傳功能就需要進(jìn)行在資源文件ueditor.config.js中正確配置資源路徑和圖片上傳路徑
資源加載路徑：window.UEDITOR_HOME_URL = "/static/UE/";
文件上傳路徑：serverUrl: 后臺(tái)接口地址

跳坑心得

1.開發(fā)環(huán)境正常使用，但生產(chǎn)環(huán)境樣式文件未加載，編輯器無法正常顯示，圖片上傳功能無法使用

（1）樣式文件未加載
在開發(fā)環(huán)境我配置的資源路徑是：window.UEDITOR_HOME_URL = "/static/UE/";
但當(dāng)我發(fā)布到生產(chǎn)環(huán)境時(shí)樣式完全亂了。
—— 這是因?yàn)槲掖a不是直接放在服務(wù)器根目錄，而是下級(jí)文件夾中，因此資源文件無法正確加載，因?yàn)樾枰_發(fā)環(huán)境和生產(chǎn)環(huán)境配置不同的window.UEDITOR_HOME_URL，當(dāng)然如果代碼放在根目錄，此處無需修改
（2）圖片上傳無法使用
—— 這是因?yàn)榈脑陂_發(fā)環(huán)境上傳路徑做了代理，而static文件不會(huì)被打包壓縮，在生產(chǎn)環(huán)境請(qǐng)求路徑就不對(duì)。
以上兩個(gè)問題，我做了如下配置：

  var serverApi = '';
  if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "productionTest") { // 生產(chǎn)/測試環(huán)境
    window.UEDITOR_HOME_URL = "/newconsole/modules/static/UE/";
    serverApi = "/newconsole/static/UE/config/getConfig"
  }else { // 開發(fā)環(huán)境
    window.UEDITOR_HOME_URL = "/static/UE/";
    serverApi = "/api/static/UE/config/getConfig"
  }

  var URL = window.UEDITOR_HOME_URL || getUEBasePath();
     /**
     * 配置項(xiàng)主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。
     */
    window.UEDITOR_CONFIG = {

        //為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
        UEDITOR_HOME_URL: URL,
        // 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
        serverUrl: serverApi
      }

這樣就可以很好的兼任開發(fā)環(huán)境和生產(chǎn)環(huán)境。

2.編輯器內(nèi)容過多時(shí)，會(huì)將編輯器撐開拉長，體驗(yàn)不好

這個(gè)問題處理就比較簡單了，只需要在ueditor.config.js文件中修改autoHeightEnabled:false 即可，這樣如果內(nèi)容過多時(shí)就會(huì)出現(xiàn)滾動(dòng)條，而不會(huì)撐開編輯器。

好了，以上就是此次使用Ueditor的一點(diǎn)個(gè)人總結(jié)，希望能給遇到同樣問題的小伙伴一點(diǎn)點(diǎn)幫助。