vue中使用Ueditor編輯器

 

　　1、   下載包：

　　　　從Ueditor的官網下載1.4.3.3jsp版本的Ueditor編輯器，官網地址爲：

　　　　　　http://ueditor.baidu.com/website/

　　　　　下載解壓後會獲得若是下文件目錄：

 　　　　　　

 

　　　　將上述Ueditor文件夾拷貝到vue項目的static文件夾中，此文件夾爲項目的靜態服務文件夾；

 

　　2、   修改配置

　　　　在ueditor.config.js中修改以下代碼：

 

　　　　// 這裏是配置Ueditor內部進行文件請求時的靜態文件服務地址

   　　　　 window.UEDITOR_HOME_URL = "/static/Ueditor/"

　　　　var URL = window.UEDITOR_HOME_URL || getUEBasePath();

 

 

　　3、   文件的引入

　　　　在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'

 

　　4、   在相應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>

　　5、   執行上述代碼可能會出現的問題

1. 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",

 

　　6、   若是使用的是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'

                }

            }