使用vue如何引入ueditor及node後台配置

這篇文章主要介紹了vue引入ueditor及node後台配置詳解，現在分享給大家，也給大家做個參考。

最近公司的某個客戶要用上我們公司的產品，他的後台管理裡的富文本編輯器要求有點多，開始打算用Quill，但是發現Quill根本滿足不了他的需求。在研究了市面上的富文本編輯器後，最後似乎只剩了百度的ueditor。雖然很醜~~~，不過沒關係，政府網站和這種效果更

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>
 <p class="hello">
 <script id="editor" type="text/plain"></script>
 <button @click="show">你敢点一下吗？</button>
 </p>
</template>

<script>
export default {
 name: &#39;HelloWorld&#39;,
 data () {
 return {
  editor: null
 }
 },
 methods: {
 show () {
  console.log(this.editor.getContent())
 }
 },
 mounted () {
 require(&#39;static/utf8-php/ueditor.config.js&#39;)
 require(&#39;static/utf8-php/ueditor.all.min.js&#39;)
 require(&#39;static/utf8-php/lang/zh-cn/zh-cn.js&#39;)
 require(&#39;static/utf8-php/ueditor.parse.min.js&#39;)
 this.editor = window.UE.getEditor(&#39;editor&#39;)
 },
 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哦~~

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

使用webpack打包處理bundle.js檔案過大的問題

在javascript中如何實作填入預設頭像

JavaScript的6種正規表示式（詳細教學）

#

以上是使用vue如何引入ueditor及node後台配置的詳細內容。更多資訊請關注PHP中文網其他相關文章！