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 表单中textarea字数限制实现代码
Dec 07 Javascript
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
关于img的href和src取变量及赋值的方法
Apr 28 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
Oct 13 Javascript
Zabbix添加Node.js监控的方法
Oct 20 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
JavaScript中in和hasOwnProperty区别详解
Aug 04 Javascript
微信小程序如何像vue一样在动态绑定类名
Apr 17 Javascript
socket io与vue-cli的结合使用的示例代码
Nov 01 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 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 xml文件操作代码(一)
2009/03/20 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
PHP 使用header函数设置HTTP头的示例解析 表头
2013/06/17 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP基于工厂模式实现的计算器实例
2015/07/16 PHP
phpinfo() 中 Local Value(局部变量)Master Value(主变量) 的区别
2016/02/03 PHP
JavaScript-世界上误解最深的语言分析
2007/08/12 Javascript
document.documentElement &amp;&amp; document.documentElement.scrollTop
2007/12/01 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
node.js下when.js 的异步编程实践
2014/12/03 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
2015/03/05 Javascript
jQuery鼠标经过方形图片切换成圆边效果代码分享
2015/08/20 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
2015/11/07 Javascript
Nodejs调用WebService的示例代码
2017/09/29 NodeJs
vue 数组和对象不能直接赋值情况和解决方法(推荐)
2017/10/25 Javascript
在 Node.js 中使用 async 函数的方法
2017/11/17 Javascript
微信小程序 Animation实现图片旋转动画示例
2018/08/22 Javascript
vue中监听路由参数的变化及方法
2019/12/06 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
深入学习Python中的装饰器使用
2016/06/20 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
使用python装饰器计算函数运行时间的实例
2018/04/21 Python
Django Rest framework解析器和渲染器详解
2019/07/25 Python
pycharm 安装JPype的教程
2019/08/08 Python
pyCharm 设置调试输出窗口中文显示方式(字符码转换)
2020/06/09 Python
记录一下scrapy中settings的一些配置小结
2020/09/28 Python
python中round函数保留两位小数的方法
2020/12/04 Python
英国川宁茶官方网站:Twinings茶
2019/05/21 全球购物
常用UNIX 命令(Linux的常用命令)
2015/12/26 面试题
技校教师求职简历的自我评价
2013/10/20 职场文书
法律专业应届生自荐信范文
2014/01/06 职场文书
工伤事故赔偿协议书
2014/04/15 职场文书
转让协议书范本
2014/09/13 职场文书
2015年后勤工作总结范文
2015/04/08 职场文书
2019年让高校“心动”的自荐信
2019/03/25 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android