vue引入ueditor及node後臺配置

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

vue引入ueditor

步驟

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

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

  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中找。vue

<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中的路徑必定要有最後一個"/"java

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

node後端處理

express 實現

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

  1. res.jsonp(config.json)web

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

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

相關文章
相關標籤/搜索