vue引入ueditor及node后臺配置詳解

更新時間：2018年01月03日 08:38:19 作者：朽木

這篇文章主要介紹了vue引入ueditor及node后臺配置詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧

最近公司的某個客戶要用上我們公司的產(chǎn)品，他的后臺管理里的富文本編輯器要求有點多，開始打算用Quill，但是發(fā)現(xiàn)Quill根本滿足不了他的需求。在調(diào)研了市面上的富文本編輯器后，最后似乎只剩了百度的ueditor。雖然很丑~~~，不過沒關(guān)系，政府網(wǎng)站和這種效果更搭:-D 我是不是說了什么（逃

vue引入ueditor

步驟

百度ueditor下載，隨便哪個版本就好(本文章以php版為例)，不需要特別全面功能的可以考慮下UM嘍
將對應的文件夾放到static中
修改前端vue部分引用的ueditor.confg.js，設(shè)置路徑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
  // 服務器統(tǒng)一請求接口路徑
  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ............ 下面忽略................

編寫vue文件,我已經(jīng)把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>

注意事項

在步驟3中的路徑一定要有最后一個"/"
步驟3中的serverUrl寫成對應的服務端地址

node后端處理

express 實現(xiàn)

網(wǎng)上有人已經(jīng)實現(xiàn)了express版的，使用express的有福了。不過我直接用他的是不能直接用的，在瀏覽器中報": unexcepected "，我將他的代碼改了一下，不讓它在返回配置是重定向，而是直接返回一個jsonp，jsonp內(nèi)容設(shè)置為百度的ueditor包中的php文件下的config.json，記得用正則表達式或者直接用手把注釋去掉，json是沒有注釋的。
這時你可能發(fā)現(xiàn)不報錯了，但是圖片上傳會錯誤，報404。其實圖片已經(jīng)上傳成功了，只是沒有正確的加載，因為返回的路徑只是路徑，不是完整的url，就會請求到前端服務域下。（例如"http://localhost:8080/**")。此時修改config.json中"imageUrlPrefix": "http://localhost:3000",就可以將圖片路徑補充完整?？缬騿栴}自己解決哈-----

res.jsonp(config.json)
給config.json的imageUrlPrefix加后端域

koa實現(xiàn)

這時個比較精巧的庫，而且將在v3中去掉了generator寫法，generator現(xiàn)在已經(jīng)漸漸不被支持，所以使用async寫法吧。我主要用了await-busboy這個庫，實現(xiàn)文件處理。

實現(xiàn)判斷

const ActionType = ctx.query.action
// 當ActionType為config時返回與express中一樣的json
// 當為uploadimage或uploadfile時處理
處理上傳
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哦~~

到這大概可以了，自己去試一下吧~~希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: