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 相关文章推荐
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
js浮点数精确计算(加、减、乘、除)
Dec 26 Javascript
jQuery根据元素值删除数组元素的方法
Jun 24 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
跟我学习javascript的最新标准ES6
Nov 20 Javascript
jQuery Checkbox 全选 反选的简单实例
Nov 29 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
webpack4与babel配合使es6代码可运行于低版本浏览器的方法
Oct 12 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
vue setInterval 定时器失效的解决方式
Jul 30 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统计文件大小,以GB、MB、KB、B输出
2011/05/29 PHP
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
PHP设置images目录不充许http访问的方法
2016/11/01 PHP
Prototype Hash对象 学习
2009/07/19 Javascript
利用json获取字符出现次数的代码
2012/03/22 Javascript
js实现网站首页图片滚动显示
2013/02/04 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
2014/03/06 Javascript
javascript面向对象之对象的深入理解
2015/01/13 Javascript
jQuery实现切换页面过渡动画效果
2015/10/29 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
js 定位到某个锚点的方法
2016/11/19 Javascript
php 解压zip压缩包内容到指定目录的实例
2018/01/23 Javascript
Vue组件库发布到npm详解
2018/02/17 Javascript
vue实现树形菜单效果
2018/03/19 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
Vue中 v-if/v-show/插值表达式导致闪现的原因及解决办法
2018/10/12 Javascript
Bootstrap实现省市区三级联动(亲测可用)
2019/07/26 Javascript
使用vue重构资讯页面的实例代码解析
2019/11/26 Javascript
基于vue的video播放器的实现示例
2021/02/19 Vue.js
python学习笔记之列表(list)与元组(tuple)详解
2017/11/23 Python
对python 匹配字符串开头和结尾的方法详解
2018/10/27 Python
python scp 批量同步文件的实现方法
2019/01/03 Python
python按照多个条件排序的方法
2019/02/08 Python
numpy基础教程之np.linalg
2019/02/12 Python
实例讲解使用SVG制作loading加载动画的方法
2016/04/05 HTML / CSS
Html5嵌入钉钉的实现示例
2020/06/04 HTML / CSS
西班牙床垫网上商店:Colchones.es
2018/05/06 全球购物
国际贸易毕业生自荐书
2014/06/22 职场文书
钳工实训报告总结
2014/11/04 职场文书
2015年12.4全国法制宣传日活动总结
2015/03/24 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
幼师自荐信范文(2016推荐篇)
2016/01/28 职场文书
如何用threejs实现实时多边形折射
2021/05/07 Javascript
python实现简易自习室座位预约系统
2021/06/30 Python
关于React Native使用axios进行网络请求的方法
2021/08/02 Javascript
Linux中文件的基本属性介绍
2022/06/01 Servers