最近公司的某個(gè)客戶(hù)要用上我們公司的產(chǎn)品，他的后臺(tái)管理里的富文本編輯器要求有點(diǎn)多，開(kāi)始打算用Quill，但是發(fā)現(xiàn)Quill根本滿足不了他的需求。在調(diào)研了市面上的富文本編輯器后，最后似乎只剩了百度的ueditor。雖然很丑~~~，不過(guò)沒(méi)關(guān)系，政府網(wǎng)站和這種效果更搭:-D 我是不是說(shuō)了什么（逃

vue引入ueditor

步驟

百度ueditor下載，隨便哪個(gè)版本就好(本文章以php版為例)，不需要特別全面功能的可以考慮下UM嘍 將對(duì)應(yīng)的文件夾放到static中 修改前端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)

在步驟3中的路徑一定要有最后一個(gè)"/" 步驟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)榉祷氐穆窂街皇锹窂剑皇峭暾膗rl，就會(huì)請(qǐng)求到前端服務(wù)域下。（例如"http://localhost:8080/**")。此時(shí)修改config.json中"imageUrlPrefix": "http://localhost:3000",就可以將圖片路徑補(bǔ)充完整。跨域問(wèn)題自己解決哈-----