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

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

10多年的船山網(wǎng)站建設經(jīng)驗，針對設計、前端、開發(fā)、售后、文案、推廣等六對一服務，響應快，48小時及時工作處理。全網(wǎng)整合營銷推廣的優(yōu)勢是能夠根據(jù)用戶設備顯示端的尺寸不同，自動調整船山建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設計，從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)從事“船山網(wǎng)站設計”,“船山網(wǎng)站推廣”以來，每個客戶項目都認真落實執(zhí)行。

vue引入ueditor

步驟

百度ueditor下載，隨便哪個版本就好(本文章以php版為例)，不需要特別全面功能的可以考慮下UM嘍
將對應的文件夾放到static中
修改前端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
  // 服務器統(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)容設置為百度的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哦~~

以上是“vue如何引入ueditor及node后臺配置”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對大家有所幫助，如果還想學習更多知識，歡迎關注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站欄目：vue如何引入ueditor及node后臺配置
轉載注明：http://muchs.cn/article38/gheosp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、自適應網(wǎng)站、企業(yè)網(wǎng)站制作、網(wǎng)站制作、網(wǎng)站內(nèi)鏈、標簽優(yōu)化

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容