vue引入ueditor及node後臺配置

最近公司的某個客戶要用上咱們公司的產品，他的後臺管理裏的富文本編輯器要求有點多，開始打算用Quill，可是發現Quill根本知足不了他的需求。在調研了市面上的富文本編輯器後，最後彷佛只剩了百度的ueditor。雖然很醜~~~，不過不要緊，政府網站和這種效果更搭:-D 我是否是說了什麼（逃

vue引入ueditor

步驟

1. 百度ueditor下載，隨便哪一個版本就好(本文章以php版爲例)，不須要特別全面功能的能夠考慮下UM嘍

2. 將對應的文件夾放到static中

3. 修改前端vue部分引用的ueditor.confg.js，設置路徑window.UEDITOR_HOME_URL = "/static/utf8-php/"

window.UEDITOR_HOME_URL = "/static/utf8-php/"
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    /**
     * 配置項主體。注意，此處全部涉及到路徑的配置別遺漏URL變量。
     */
    window.UEDITOR_CONFIG = {

        //爲編輯器實例添加一個路徑，這個不能被註釋
        UEDITOR_HOME_URL: URL
        // 服務器統一請求接口路徑
        , serverUrl: "http://localhost:3000/ueditor/ue"
    // ............   下面忽略................

1. 編寫vue文件,我已經把static配置到webpack的路徑裏了，本身能夠相應更改，ueditor中的各項方法能夠在本身下載的百度ueditor包的index.html中找。

<template>
  <div class="hello">
    <script id="editor" type="text/plain"></script>
    <button @click="show">你敢點一下嗎？</button>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      editor: null
    }
  },
  methods: {
    show () {
      console.log(this.editor.getContent())
    }
  },
  mounted () {
    require('static/utf8-php/ueditor.config.js')
    require('static/utf8-php/ueditor.all.min.js')
    require('static/utf8-php/lang/zh-cn/zh-cn.js')
    require('static/utf8-php/ueditor.parse.min.js')
    this.editor = window.UE.getEditor('editor')
  },
  destroyed () {
    this.editor.destroy()
  }
}
</script>

注意事項

1. 在步驟3中的路徑必定要有最後一個"/"

2. 步驟3中的serverUrl寫成對應的服務端地址

node後端處理

express 實現

網上有人已經實現了express版的，使用express的有福了。不過我直接用他的是不能直接用的，在瀏覽器中報": unexcepected "，我將他的代碼改了一下，不讓它在返回配置是重定向，而是直接返回一個jsonp，jsonp內容設置爲百度的ueditor包中的php文件下的config.json，記得用正則表達式或者直接用手把註釋去掉，json是沒有註釋的。
這時你可能發現不報錯了，可是圖片上傳會錯誤，報404。其實圖片已經上傳成功了，只是沒有正確的加載，由於返回的路徑只是路徑，不是完整的url，就會請求到前端服務域下。（例如"http://localhost:8080/**")。此時修改config.json中"imageUrlPrefix": "http://localhost:3000",就能夠將圖片路徑補充完整。跨域問題本身解決哈-----

1. res.jsonp(config.json)

2. 給config.json的imageUrlPrefix加後端域

koa實現

這時個比較精巧的庫，並且將在v3中去掉了generator寫法，generator如今已經漸漸不被支持，因此使用async寫法吧。我主要用了await-busboy這個庫，實現文件處理。

1. 實現判斷

const ActionType = ctx.query.action
// 當ActionType爲config時返回與express中同樣的json
// 當爲uploadimage或uploadfile時處理

1. 處理上傳

const parse = require('await-busboy')
const parts = parse(ctx)
    let part,
        stream,
        tmp_name,
        file_path,
        filename
    while ((part = await parts)) {
      if (part.length) {
          // 此處解析到form的fields
          console.log({ key: part[0], value: part[1] })
      } else {
        // 此處解析到文件並以可讀流形式返回，經過nodejs官方API存儲
        if(ActionType === 'uploadimage' && img_type.indexOf(path.extname(part.filename)) >= 0 ){
            filename = 'pic_'+ (new Date()).getTime() + '_' + part.filename
            file_path = path.join(img_path, filename)
        } else if (ActionType === 'uploadfile'){
            filename = 'file_'+(new Date()).getTime()+'_'+part.filename
            file_path = path.join(files_path, filename)
        }
        stream = fs.createWriteStream(path.join(static_path,file_path))
        part.pipe(stream)
        tmp_name = part.filename
    }
    // 返回json要引用koa-jsonp哦~~

到這大概能夠了，本身去試一下吧~~