vue如何引入ueditor及node后臺(tái)配置

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

vue引入ueditor

步驟

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

2. 將對(duì)應(yīng)的文件夾放到static中

3. 修改前端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();
 /**
  * 配置項(xiàng)主體。注意，此處所有涉及到路徑的配置別遺漏URL變量。
  */
 window.UEDITOR_CONFIG = {

  //為編輯器實(shí)例添加一個(gè)路徑，這個(gè)不能被注釋
  UEDITOR_HOME_URL: URL
  // 服務(wù)器統(tǒng)一請(qǐng)求接口路徑
  , serverUrl: "http://localhost:3000/ueditor/ue"
 // ............ 下面忽略................

編寫(xiě)vue文件,我已經(jīng)把static配置到webpack的路徑里了，自己可以相應(yīng)更改，ueditor中的各項(xiàng)方法可以在自己下載的百度ueditor包的index.html中找。

<template>
 <div class="hello">
 <script id="editor" type="text/plain"></script>
 <button @click="show">你敢點(diǎn)一下嗎？</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>

注意事項(xiàng)

1. 在步驟3中的路徑一定要有最后一個(gè)"/"

2. 步驟3中的serverUrl寫(xiě)成對(duì)應(yīng)的服務(wù)端地址

node后端處理

express 實(shí)現(xiàn)

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

1. res.jsonp(config.json)

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

koa實(shí)現(xiàn)

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

實(shí)現(xiàn)判斷

const ActionType = ctx.query.action
// 當(dāng)ActionType為config時(shí)返回與express中一樣的json
// 當(dāng)為uploadimage或uploadfile時(shí)處理
處理上傳
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 {
  // 此處解析到文件并以可讀流形式返回，通過(guò)nodejs官方API存儲(chǔ)
  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后臺(tái)配置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！