最近公司的某個客戶要用上咱們公司的產品,他的後臺管理裏的富文本編輯器要求有點多,開始打算用Quill,可是發現Quill根本知足不了他的需求。在調研了市面上的富文本編輯器後,最後彷佛只剩了百度的ueditor。雖然很醜~~~,不過不要緊,政府網站和這種效果更搭:-D 我是否是說了什麼(逃javascript
百度ueditor下載,隨便哪一個版本就好(本文章以php版爲例),不須要特別全面功能的能夠考慮下UM嘍php
將對應的文件夾放到static中html
修改前端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中找。vue
<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中的路徑必定要有最後一個"/"java
步驟3中的serverUrl寫成對應的服務端地址node
網上有人已經實現了express版的,使用express的有福了。不過我直接用他的是不能直接用的,在瀏覽器中報": unexcepected ",我將他的代碼改了一下,不讓它在返回配置是重定向,而是直接返回一個jsonp,jsonp內容設置爲百度的ueditor包中的php文件下的config.json,記得用正則表達式或者直接用手把註釋去掉,json是沒有註釋的。
這時你可能發現不報錯了,可是圖片上傳會錯誤,報404。其實圖片已經上傳成功了,只是沒有正確的加載,由於返回的路徑只是路徑,不是完整的url,就會請求到前端服務域下。(例如"http://localhost:8080/**")。此時修改config.json中"imageUrlPrefix": "http://localhost:3000",就能夠將圖片路徑補充完整。跨域問題本身解決哈-----webpack
res.jsonp(config.json)web
給config.json的imageUrlPrefix加後端域正則表達式
這時個比較精巧的庫,並且將在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哦~~
到這大概能夠了,本身去試一下吧~~