vue如何引入ueditor及node后臺配置

小編給大家分享一下vue如何引入ueditor及node后臺配置，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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"
 // ............ 下面忽略................

編寫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這個庫，實現文件處理。

實現判斷

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

以上是“vue如何引入ueditor及node后臺配置”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！