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编辑器的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
发布BlueShow v1.0 图片浏览器(类似lightbox)blueshow.js 打包下载
Jul 21 Javascript
JavaScript 乱码问题
Aug 06 Javascript
JavaScript设计模式之原型模式(Object.create与prototype)介绍
Dec 28 Javascript
javascript编写实用的省市选择器
Feb 12 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
在vue中添加Echarts图表的基本使用教程
Nov 22 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
three.js实现3D模型展示的示例代码
Dec 31 Javascript
jquery动态添加以及遍历option并获取特定样式名称的option方法
Jan 29 jQuery
原生js实现each方法实例代码详解
May 27 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
You might like
PHP调用Twitter的RSS的实现代码
2010/03/10 PHP
php中的三元运算符使用说明
2011/07/03 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
PHP设计模式之迭代器模式的深入解析
2013/06/13 PHP
PHP获取指定月份第一天和最后一天的方法
2015/07/18 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
parseInt parseFloat js字符串转换数字
2010/08/01 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
用Javascript来生成ftp脚本的小例子
2013/07/03 Javascript
关于js内存泄露的一个好例子
2013/12/09 Javascript
用jQuery模拟select下拉框的简单示例代码
2014/01/26 Javascript
js简单的表格添加行和删除行操作示例
2014/03/31 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
JavaScript设计模式经典之工厂模式
2016/02/24 Javascript
全屏滚动插件fullPage.js使用实例解析
2016/10/21 Javascript
JS库之Particles.js中文开发手册及参数详解
2017/09/13 Javascript
vue中遇到的坑之变化检测问题(数组相关)
2017/10/13 Javascript
微信小程序中的列表切换功能实例代码详解
2020/06/09 Javascript
[36:33]2018DOTA2亚洲邀请赛 4.3 突围赛 EG vs Newbee 第二场
2018/04/04 DOTA
学习python类方法与对象方法
2016/03/15 Python
Python学习小技巧之列表项的排序
2017/05/20 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
python获取文件路径、文件名、后缀名的实例
2018/04/23 Python
Python 在字符串中加入变量的实例讲解
2018/05/02 Python
Python设计模式之观察者模式原理与用法详解
2019/01/16 Python
django的ORM操作 删除和编辑实现详解
2019/07/24 Python
python自动化测试之异常及日志操作实例分析
2019/11/09 Python
django迁移文件migrations的实现
2020/03/31 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python函数__new__及__init__作用及区别解析
2020/08/31 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
Canvas 文本填充线性渐变的使用详解
2020/06/22 HTML / CSS
医学院毕业生自荐信范文
2014/03/06 职场文书
品酒会策划方案
2014/05/26 职场文书
《失物招领》教学反思
2016/02/20 职场文书
微信小程序实现轮播图指示器
2022/06/25 Javascript