webpack，node.js，vue.js集成的Ueditor

╰+攻爆jí腚メ 2022-11-26 08:58 46阅读 0赞

![image.png][]

## 1、下载ueditor前端包 ##

下载库包，[http://ueditor.baidu.com/website/download.html][http_ueditor.baidu.com_website_download.html]

将\\ueditor1\_4\_3\_3-utf8-jsp\\utf8-jsp目录移植到项目public\\ueditor下

![image.png][image.png 1]

## 2、改造public\\ueditor\\ueditor.all.js文件，使它支持common.js规范 ##

require("./ueditor.config");
    var zhCn = require("./lang/zh-cn/zh-cn");
    (function(){
        // editor.js
        UEDITOR_CONFIG = window.UEDITOR_CONFIG || {};
        var baidu = window.baidu || {};
        window.baidu = baidu;
        module.exports =  window.UE = baidu.editor =  window.UE || {};
        UE.plugins = {};
        UE.commands = {};
        UE.instants = {};
        UE.I18N = {};
        UE.I18N['zh-cn'] = zhCn;
    
        ...

## 3、改造\\ueditor\\ueditor.config.js文件，P22 ##

window.UEDITOR_HOME_URL = "/ueditor/";
    var URL = window.UEDITOR_HOME_URL || getUEBasePath();
    
    /**
     * 配置项主体。注意，此处所有涉及到路径的配置别遗漏URL变量。
     */
    window.UEDITOR_CONFIG = {
        //为编辑器实例添加一个路径，这个不能被注释
        UEDITOR_HOME_URL: URL
    
        // 服务器统一请求接口路径
        , serverUrl: URL + "ue"
        
        ...

## 4、cms-form.vue页面中引用 ##

## 5、转储存图片到图片服务器，参考如下node.js路由 ##

/**
     * Created by lin on 2017/5/11.
     */
    var formidable = require("formidable");
    var qs = require('querystring');//解析参数的库
    var express = require('express');
    var path = require('path');
    var fs = require('fs');
    var http = require('http');
    var async = require('async');
    const url = require('url');
    var conf = require('../config/conf');// 图片服务器地址配置
    module.exports = function (routeReq, routeRes, next) {
       if (routeReq.query.action === 'config') {
          routeRes.setHeader('Content-Type', 'application/json');
          routeRes.redirect('/ueditor/nodejs/config.json');
          return;
       } else if (routeReq.query.action === 'catchimage') {
          function factory(remoteUrl) {
             return function (callbackfirst) {
                async.waterfall([
                   function(callback) {
                      var oUrl = url.parse(remoteUrl);
                      var aPath = oUrl.pathname.split("/");
                      var filename = aPath[aPath.length - 1];
                      http.get({
                         host: oUrl.hostname,
                         path: oUrl.pathname,
                         port: oUrl.port || 80
                      }, function (res) {
                         let rawData = '';
                         res.setEncoding("binary");
                         res.on('data', (chunk) => {
                            rawData += chunk;
                         });
                         res.on('end', () => {
                            try {
                               var data = new Buffer(rawData, "binary").toString('base64');
                               callback(null,data, filename);
                            } catch (e) {
                               callback(e);
                               console.error(e.message);
                            }
                         });
                      });
                   }
                ], function (err, data,fileName) {
                   var base64Data = data;
                   var postData = {
                      data: base64Data,
                      filename: fileName
                   };
                   var sPostData = qs.stringify(postData);
                   var options = {
                      hostname: conf.fileServer,
                      port: conf.fileServerPort,
                      path: conf.fileServerPath,
                      method: "POST",
                      headers: {
                         'Content-Type': 'application/x-www-form-urlencoded',
                         'Content-Length': Buffer.byteLength(sPostData)
                      }
                   };
                   var req = http.request(options, (res) => {
                      res.setEncoding('utf8');
                      var aResData = [];
                      res.on('data', (chunk) => {
                         aResData.push(chunk);
                      });
                      res.on('end', () => {
                         var resData = aResData.join("");
                         var data = resData.toString();
                         var jDate = JSON.parse(data);
                         var sResule = {};
                         if (jDate.code == "success") {
                            sResule.url = "http://" + conf.fileServer + ":" + conf.fileServerPort + jDate.path;
                            sResule.title = fileName;
                            sResule.source = remoteUrl;
                            sResule.state = "SUCCESS";
                            sResule.size = base64Data.length;
                         } else {
                            sResule.state = "Fail";
                         }
                         callbackfirst(null,sResule);
                      });
                   });
                   req.on('error', (e) => {
                      callbackfirst(e);
                      console.log(`请求遇到问题: ${e.message}`);
                   });
                   // 写入数据到请求主体
                   req.write(sPostData);
                   req.end();
                });
             }
          }
          var source = routeReq.body['source[]'];
          var aRemoteUrls = [];
          if (typeof source === "string") {
             aRemoteUrls.push(source);
          } else {
             aRemoteUrls = source;
          }
          var factorys = aRemoteUrls.map(factory);
          async.parallel(
             factorys,
             function (err, results) {
                if(err){
                   next(err);
                   return;
                }
                var result = {
                   list: results,
                   state: "SUCCESS"
                }
                routeRes.writeHead(200, {'Content-Type': 'application/json;charset=utf-8'});
                routeRes.end(JSON.stringify(result));
             }
          );
          
       } else {
          function sentPicToServer(data, fileName) {
             var base64Data = data;
             var postData = {
                data: base64Data,
                filename: fileName
             };
             var sPostData = qs.stringify(postData);
             var options = {
                hostname: conf.fileServer,
                port: conf.fileServerPort,
                path: conf.fileServerPath,
                method: "POST",
                headers: {
                   'Content-Type': 'application/x-www-form-urlencoded',
                   'Content-Length': Buffer.byteLength(sPostData)
                }
             };
             var req = http.request(options, (res) => {
                res.setEncoding('utf8');
                var aResData = [];
                res.on('data', (chunk) => {
                   aResData.push(chunk);
                });
                res.on('end', () => {
                   var resData = aResData.join("");
                   routeRes.writeHead(200, {'Content-Type': 'application/json;charset=utf-8'});
                   var data = resData.toString();
                   var jDate = JSON.parse(data);
                   var sResule = {};
                   if (jDate.code == "success") {
                      sResule.url = "http://" + conf.fileServer + ":" + conf.fileServerPort + jDate.path;
                      sResule.original = fileName;
                      sResule.state = "SUCCESS";
                   } else {
                      sResule.state = "Fail";
                   }
                   routeRes.end(JSON.stringify(sResule));
                });
             });
             req.on('error', (e) => {
                next(e);
                console.log(`请求遇到问题: ${e.message}`);
             });
             // 写入数据到请求主体
             req.write(sPostData);
             req.end();
          }
          
          var form = new formidable.IncomingForm();
          form.parse(routeReq, function (err, fields, files) {
          });
          form.on('file', function (name, file) {
             fs.readFile(file.path, function (err, data) {
                if (err) next(err);
                sentPicToServer(new Buffer(data).toString('base64'), file.name);
             });
          });
       }
    }

/-----------------------------------2017121更新-------------------------------/

应网友要求，我在github提供源码如下

[https://github.com/ShuangMuChengLi/vue.js\_webpack\_Ueditor][https_github.com_ShuangMuChengLi_vue.js_webpack_Ueditor]

不使用jquery，采用vue.js

<template>
        <div class="wrap">
            <h1></h1>
            <a class="model" href="javascript:void(0)" @click="loadModel()">设置内容</a>
            <div id="editor" type="text/plain" style="height:500px;"></div>
        </div>
    </template>
    
    <script>
     var UE = require("../../ueditor/ueditor.all");
    
     export default {
            data () {
                return {
    
                }
            },
     watch: {
    
            },
     created:function () {
    
            },
     mounted:function () {
               this.ue = UE.getEditor('editor',{'autoHeightEnabled': false});
     },
     methods: {
               loadModel (){
                    this.ue.setContent("内容")
               }
            },
     destroyUe(){
                UE.delEditor("editor");
     },
     }
    </script>
    
    
    <style scoped lang="less">
     @import "../../css/index";
    </style>

/-----------------------------------20200116更新-------------------------------/

修改了一些新版谷歌浏览器不兼容的BUG，将JSONP、form+Iframe请求使用axios调用

因此要依赖axios

yarn add axios

[https://github.com/ShuangMuChengLi/project-init/tree/ueditor][https_github.com_ShuangMuChengLi_project-init_tree_ueditor]

[image.png]: /images/20221124/b9fdfdddea4243dc86f661e6906ee621.png
[http_ueditor.baidu.com_website_download.html]: http://ueditor.baidu.com/website/download.html
[image.png 1]: /images/20221124/19f7bb09cf294629a98caf21e16d3e78.png
[https_github.com_ShuangMuChengLi_vue.js_webpack_Ueditor]: https://github.com/ShuangMuChengLi/vue.js_webpack_Ueditor
[https_github.com_ShuangMuChengLi_project-init_tree_ueditor]: https://github.com/ShuangMuChengLi/project-init/tree/ueditor