vue中使用Ueditor編輯器
一、 下載包：
從Ueditor的官網下載1.4.3.3jsp版本的Ueditor編輯器，官網地址為：
http://ueditor.baidu.com/website/
下載解壓後會得到如果下文件目錄：
將上述Ueditor文件夾拷貝到vue項目的static文件夾中，此文件夾為項目的靜態服務文件夾；
二、 修改配置
在ueditor.config.js中修改如下代碼：
// 這裏是配置Ueditor內部進行文件請求時的靜態文件服務地址
window.UEDITOR_HOME_URL = "/static/Ueditor/"
var URL = window.UEDITOR_HOME_URL || getUEBasePath();
三、 文件的引入
在vue項目的入口文件main.js中將Ueditor所有的基礎文件引入如下：（路徑自行配制）
import‘../static/Ueditor/ueditor.config.js‘
import‘../static/Ueditor/ueditor.all.min.js‘
import‘../static/Ueditor/lang/zh-cn/zh-cn.js‘
import‘../static/Ueditor/ueditor.parse.min.js‘
四、 在相應vue的componnent文件中使用富文本編輯器
<template>
<div>
<!--editor的div為富文本的承載容器-->
<divid="editor"></div>
<buttontype="" @click="gettext">點擊</button>
</div>
</template>
<script>
exportdefault {
data() {
return {
editor: null,
}
},
mounted() {
// 實例化editor編輯器
this.editor = UE.getEditor(‘editor‘);
// console.log(this.editor.setContent("1223"))
},
methods: {
gettext() {
// 獲取editor中的文本
console.log(this.editor.getContent())
}
},
destroyed() {
// 將editor進行銷毀
this.editor.destroy();
}
}
</script>
五、 執行上述代碼可能會出現的問題
- 1. 出現如下報錯
出現此種現象的原因是配置ueditor的圖片以及文件的後臺上傳接口不正確；
如果Ueditor不需要使用文件以及圖片的上傳則在ueditor.config.js中進行如下配置：（將serverUrl註釋掉）
// 服務器統一請求接口路徑
// serverUrl: URL + "jsp/controller.jsp",
以後將不會再出現上述報錯，但是也將無法進行圖片的上傳：如下圖：
如果Ueditor需要使用文件以及圖片的上傳則在ueditor.config.js中進行如下配置：
// 服務器統一請求接口路徑，配置的服務端接口
serverUrl: "http://127.0.0.1:9999/api/UE",
//或者如果使用了代理，則可以如下進行配置
serverUrl: "/api/ue",
六、 如果使用的是node的express做服務端，接口開發如下
首先下載編輯器包
npm install –save-dev ueditor
服務端項目文件中在public中增加如下目錄以及文件
註：ueditor中的images文件夾是上傳圖片後存儲的地方
nodejs中的config.js就是下載的ueditor包的jsp文件夾下config.json文件
開發接口
//加載ueditor 模塊
var ueditor = require("ueditor");
//使用模塊
app.use("/api/ue", ueditor(path.join(__dirname, ‘public‘), function(req, res, next) {
// ueditor 客戶發起上傳圖片請求
if (req.query.action === ‘uploadimage‘) {
var foo = req.ueditor;
var imgname = req.ueditor.filename;
var img_url = ‘/ueditor/images/‘;
res.ue_up(img_url); //你只要輸入要保存的地址。保存操作交給ueditor來做
res.setHeader(‘Content-Type‘, ‘text/html‘); //IE8下載需要設置返回頭尾text/html 不然json返回文件會被直接下載打開
}
// 客戶端發起圖片列表請求
elseif (req.query.action === ‘listimage‘) {
var dir_url = ‘/ueditor/images/‘;
res.ue_list(dir_url); // 客戶端會列出 dir_url 目錄下的所有圖片
}
// 客戶端發起其它請求
else {
console.log(‘config.json‘)
res.setHeader(‘Content-Type‘, ‘application/json‘);
res.redirect(‘/ueditor/nodejs/config.js‘);
}
}));
註：
上述接口中的"/api/ue"接口就是配置在前臺項目ueditor.config.js文件中的serverUrl地址；
上述接口中img_url的‘/ueditor/images/‘和res.redirect的‘/ueditor/nodejs/config.js‘配置都是使用的express靜態文件服務對圖片存儲路徑和圖片默認配置文件的存儲和請求；
進行上述配置後，一定要在webpack的代理中添加如下代理：
// 配置ueditor的圖片上傳服務器預覽路徑
‘/ueditor‘: {
//後臺接口地址
target: ‘http://localhost:9999‘,
//這裏可以模擬服務器進行get和post參數的傳遞
changeOrigin: true,
//前端所有的/ueditor‘請求都會請求到後臺的/ueditor‘路徑之下
pathRewrite: {
‘^/ueditor‘: ‘/ueditor‘
}
}
vue中使用Ueditor編輯器