一、???下載包：

　　　　從Ueditor的官網下載1.4.3.3jsp版本的Ueditor編輯器，官網地址為：http://ueditor.baidu.com/website/download.html

　　　　　下載解壓后會得到如果下文件目錄：

?　　　　　　??

　　　　將上述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為富文本的承載容器--><div id="editor"></div><button type="" @click="gettext">點擊</button></div></template><script>exportdefault {data() {return {editor: null,}},mounted() {// 引入urlUEDITOR_CONFIG.UEDITOR_HOME_URL = '../../static/Ueditor/'// 實例化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'}}

?

更多專業前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的vue中使用Ueditor编辑器 -- 1的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。