首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

node.js集成百度UE编辑器

Posted in Javascript onFebruary 05, 2015

摘要：

最近在搭建自己的博客，这一段时间可能没有时间来写博客了，但是有了好东西还是要分享给大家。博客网站必然要有编辑文章的编辑器，所以在网上查了些资料。大部分编辑器的后台是基于java、php、asp等，很少有基于node.js的。本来是想用markdown来写文章，但是样式不好调，所以最终还是选择了百度的ueditor，其官网上并没有基于node.js的代码。但是幸运的是我在github上找到了一个类似的，所以将他分享给大家，如果你打算也用node.js来开发自己的博客时可以参考下。

下载引用：

首先到ueditor官网上下载代码，我下载的是开发版1.4.3php utf-8版本，解压之后将文件放到public目录下，此处我将其重命名为ueditor。然后在你所需要的页面头部加上这三行

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>

<script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>

<script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"> </script>

然后在需要的地方调用下面的代码

<script id="editor" type="text/plain" style="width:1000px;height:500px;"></script>

<script>

    var ue = UE.getEditor('editor');

</script>

后台修改：

下载下来的是基于php的，现在我们来改成基于node.js的。首先把不用的php文件删除掉，然后新建文件夹nodejs，并在此目录下新建文件config.json,内容如下：

/* 前后端通信相关的配置,注释只允许使用多行方式 */

{

    /* 上传图片配置项 */

    "imageActionName": "uploadimage", /* 执行上传图片的action名称 */

    "imageFieldName": "upfile", /* 提交的图片表单名称 */

    "imageMaxSize": 2048000, /* 上传大小限制，单位B */

    "imageAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 上传图片格式显示 */

    "imageCompressEnable": true, /* 是否压缩图片,默认是true */

    "imageCompressBorder": 1600, /* 图片压缩最长边限制 */

    "imageInsertAlign": "none", /* 插入的图片浮动方式 */

    "imageUrlPrefix": "", /* 图片访问路径前缀 */

    "imagePathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

                                /* {filename} 会替换成原文件名,配置这项需要注意中文乱码问题 */

                                /* {rand:6} 会替换成随机数,后面的数字是随机数的位数 */

                                /* {time} 会替换成时间戳 */

                                /* {yyyy} 会替换成四位年份 */

                                /* {yy} 会替换成两位年份 */

                                /* {mm} 会替换成两位月份 */

                                /* {dd} 会替换成两位日期 */

                                /* {hh} 会替换成两位小时 */

                                /* {ii} 会替换成两位分钟 */

                                /* {ss} 会替换成两位秒 */

                                /* 非法字符 \ : * ? " < > | */

                                /* 具请体看线上文档: fex.baidu.com/ueditor/#use-format_upload_filename */

    /* 涂鸦图片上传配置项 */

    "scrawlActionName": "uploadscrawl", /* 执行上传涂鸦的action名称 */

    "scrawlFieldName": "upfile", /* 提交的图片表单名称 */

    "scrawlPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    "scrawlMaxSize": 2048000, /* 上传大小限制，单位B */

    "scrawlUrlPrefix": "", /* 图片访问路径前缀 */

    "scrawlInsertAlign": "none",

    /* 截图工具上传 */

    "snapscreenActionName": "uploadimage", /* 执行上传截图的action名称 */

    "snapscreenPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    "snapscreenUrlPrefix": "", /* 图片访问路径前缀 */

    "snapscreenInsertAlign": "none", /* 插入的图片浮动方式 */

    /* 抓取远程图片配置 */

    "catcherLocalDomain": ["127.0.0.1", "localhost", "img.baidu.com"],

    "catcherActionName": "catchimage", /* 执行抓取远程图片的action名称 */

    "catcherFieldName": "source", /* 提交的图片列表表单名称 */

    "catcherPathFormat": "/ueditor/php/upload/image/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    "catcherUrlPrefix": "", /* 图片访问路径前缀 */

    "catcherMaxSize": 2048000, /* 上传大小限制，单位B */

    "catcherAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 抓取图片格式显示 */

    /* 上传视频配置 */

    "videoActionName": "uploadvideo", /* 执行上传视频的action名称 */

    "videoFieldName": "upfile", /* 提交的视频表单名称 */

    "videoPathFormat": "/ueditor/php/upload/video/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    "videoUrlPrefix": "", /* 视频访问路径前缀 */

    "videoMaxSize": 102400000, /* 上传大小限制，单位B，默认100MB */

    "videoAllowFiles": [

        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid"], /* 上传视频格式显示 */

    /* 上传文件配置 */

    "fileActionName": "uploadfile", /* controller里,执行上传视频的action名称 */

    "fileFieldName": "upfile", /* 提交的文件表单名称 */

    "filePathFormat": "/ueditor/php/upload/file/{yyyy}{mm}{dd}/{time}{rand:6}", /* 上传保存路径,可以自定义保存路径和文件名格式 */

    "fileUrlPrefix": "", /* 文件访问路径前缀 */

    "fileMaxSize": 51200000, /* 上传大小限制，单位B，默认50MB */

    "fileAllowFiles": [

        ".png", ".jpg", ".jpeg", ".gif", ".bmp",

        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",

        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",

        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"

    ], /* 上传文件格式显示 */

    /* 列出指定目录下的图片 */

    "imageManagerActionName": "listimage", /* 执行图片管理的action名称 */

    "imageManagerListPath": "/ueditor/php/upload/image/", /* 指定要列出图片的目录 */

    "imageManagerListSize": 20, /* 每次列出文件数量 */

    "imageManagerUrlPrefix": "", /* 图片访问路径前缀 */

    "imageManagerInsertAlign": "none", /* 插入的图片浮动方式 */

    "imageManagerAllowFiles": [".png", ".jpg", ".jpeg", ".gif", ".bmp"], /* 列出的文件类型 */

    /* 列出指定目录下的文件 */

    "fileManagerActionName": "listfile", /* 执行文件管理的action名称 */

    "fileManagerListPath": "/ueditor/php/upload/file/", /* 指定要列出文件的目录 */

    "fileManagerUrlPrefix": "", /* 文件访问路径前缀 */

    "fileManagerListSize": 20, /* 每次列出文件数量 */

    "fileManagerAllowFiles": [

        ".png", ".jpg", ".jpeg", ".gif", ".bmp",

        ".flv", ".swf", ".mkv", ".avi", ".rm", ".rmvb", ".mpeg", ".mpg",

        ".ogg", ".ogv", ".mov", ".wmv", ".mp4", ".webm", ".mp3", ".wav", ".mid",

        ".rar", ".zip", ".tar", ".gz", ".7z", ".bz2", ".cab", ".iso",

        ".doc", ".docx", ".xls", ".xlsx", ".ppt", ".pptx", ".pdf", ".txt", ".md", ".xml"

    ] /* 列出的文件类型 */

}

然后找到文件ueditor.config.js，找到下面这行，将后面引号改成你自己的后台路径。

serverUrl: URL + "php/controller.php"

比如：

serverUrl: URL + "ueditor"

我们需要安装下面这些包

"dependencies": {

    "body-parser": "~1.0.0",

    "express": "~4.2.0",

    "ueditor": "^1.0.0"

  }

后台代码：

var express = require('express');var path = require('path');

var app = express();

var ueditor = require("ueditor");

var bodyParser = require('body-parser');

app.use(bodyParser.urlencoded({

  extended: true

}));

app.use(bodyParser.json());

app.use("/ueditor/ueditor", 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 = '/images/ueditor/';

        //你只要输入要保存的地址 。保存操作交给ueditor来做

        res.ue_up(img_url); 

    }

    //  客户端发起图片列表请求

    else if (req.query.action === 'listimage') {

        var dir_url = '/images/ueditor/';

        // 客户端会列出 dir_url 目录下的所有图片

        res.ue_list(dir_url); 

    }

    // 客户端发起其它请求

    else {

        res.setHeader('Content-Type', 'application/json');

        res.redirect('/ueditor/nodejs/config.json');

    }

}));

注意：上面只是处理了图片上传的，视频上传的可以看官网API，仿照开发。

以上就是在nodejs项目中集成百度UE编辑器的全部内容了，希望大家能够喜欢。

node.js集成百度UE编辑器

- Author -

hebedich

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
(转载)JavaScript中匿名函数，函数直接量和闭包
May 08 Javascript
Mootools 1.2教程(2) DOM选择器
Sep 14 Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 Javascript
Javascript insertAfter() 实现函数代码
Oct 12 Javascript
JQuery实现简单验证码提示解决方案
Dec 20 Javascript
基于jquery实现的图片在各种分辨率下未知的容器内上下左右居中
May 11 Javascript
浅析Javascript匿名函数与自执行函数
Feb 06 Javascript
jQuery实现Select左右复制移动内容
Aug 05 Javascript
CSS3 3D 技术手把手教你玩转
Sep 02 Javascript
基于模板引擎Jade的应用(详解)
Dec 12 Javascript
JS实现的tab页切换效果完整示例
Dec 18 Javascript
JavaScript语法约定和程序调试原理解析
Nov 03 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 #Javascript
JavaScript计时器示例分析
Feb 05 #Javascript
编写自己的jQuery提示框（Tip）插件
Feb 05 #Javascript
使用pjax实现无刷新更改页面url
Feb 05 #Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
Feb 05 #Javascript
jquery手风琴特效插件
Feb 04 #Javascript
Jquery中find与each方法用法实例
Feb 04 #Javascript
嵌套(1) 二维数组(2) 安卓(1) android studio(3) 循环(3) 移动开发(2) IDEA(2) OpenLayer(1) 分块(1) 查找算法(1)
You might like
编写PHP脚本来实现WordPress中评论分页的功能
2015/12/10 PHP
PHP 二维array转换json的实例讲解
2018/08/21 PHP
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
优化javascript的执行效率一些方法总结
2013/12/25 Javascript
JQuery插件jcarousellite的参数中文说明
2015/05/11 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
jQuery侧边栏实现代码
2016/05/06 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
2016/12/08 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
vuejs手把手教你写一个完整的购物车实例代码
2017/07/06 Javascript
JavaScript实现一个简易的计算器实例代码
2018/05/10 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
JavaScript使用类似break机制中断forEach循环的方法
2018/11/13 Javascript
js中事件对象和事件委托的介绍
2019/01/21 Javascript
vue实现pdf文档在线预览功能
2019/11/26 Javascript
vue自定义插件封装，实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
通过python+selenium3实现浏览器刷简书文章阅读量
2017/12/26 Python
Python处理命令行参数模块optpars用法实例分析
2018/05/31 Python
python中使用print输出中文的方法
2018/07/16 Python
python 将字符串完成特定的向右移动方法
2019/06/11 Python
python之yield和Generator深入解析
2019/09/18 Python
Python字符编码转码之GBK,UTF8互转
2020/02/09 Python
如何教少儿学习Python编程
2020/07/10 Python
python import 上级目录的导入
2020/11/03 Python
python实现计算器简易版
2020/12/17 Python
Python爬虫scrapy框架Cookie池(微博Cookie池)的使用
2021/01/13 Python
如何利用CSS3制作3D效果文字具体实现样式
2013/05/02 HTML / CSS
品恩科技软件测试面试题
2014/10/26 面试题
2014年计算机专业个人自我评价
2014/01/19 职场文书
青年教师培训方案
2014/02/06 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
会议室管理制度范本
2015/08/06 职场文书
有关保护环境的宣传标语100条
2019/08/07 职场文书
python 批量压缩图片的脚本
2021/06/02 Python
利用Python将list列表写入文件并读取的方法汇总
2022/03/25 Python
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL