nodejs后台集成ueditor富文本编辑器的实例


Posted in NodeJs onJuly 11, 2017

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..

1 下载ueditor nodejs版本

2 复制public目录下面的文件

nodejs后台集成ueditor富文本编辑器的实例

到项目静态资源public文件夹下

nodejs后台集成ueditor富文本编辑器的实例

3 在项目根目录创建ueditor文件夹

nodejs后台集成ueditor富文本编辑器的实例

要复制进来的内容为

nodejs后台集成ueditor富文本编辑器的实例

4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块

5 项目根目录下创建 ue.js 代码部分来自于

nodejs后台集成ueditor富文本编辑器的实例

ue.js 代码

const express = require('express'),
  path = require('path'),
  ueditor = require("./ueditor/"),
  router = express.Router();

router.use("/",ueditor(path.join(process.cwd(),'public'),function (req,res,next){
  //客户端上传文件设置
  //console.log(req.query.action);
  let ActionType = req.query.action;
  if(ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo'){
    let file_url = '/img/ueditor/';//默认图片上传地址
    /*其他上传格式的地址*/
    if(ActionType === 'uploadfile'){
      file_url = '/file/ueditor/'; //附件
    }
    if(ActionType === 'uploadvideo'){
      file_url = '/video/ueditor/'; //视频
    }
    res.ue_up(file_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
    res.setHeader('Content-Type','text/html');
  }
  // 客户端发起图片列表请求
  else if(req.query.action === 'listimage'){
    let dir_url = '/img/ueditor/';
    res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
  }else if(req.query.action === 'listfile'){
    let dir_url = '/file/ueditor/';
    res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
  }
  // 客户端发起其它请求
  else{
    // console.log('config.json')
    res.setHeader('Content-Type','application/json');
    res.redirect('/ueditor/nodejs/config.json');
  }
}));
module.exports = router;

特别说明 默认ueditor上传的图片路径为 public/img/ueditor

6 路由设置 根目录下 app.js ---use()匹配的所有的路由/ueditor/ue,都会走 这个路由

nodejs后台集成ueditor富文本编辑器的实例

7 后台模板使用富文本编辑器 --这里我后台主要发布文章的时候用到富文本编辑器

nodejs后台集成ueditor富文本编辑器的实例

nodejs后台集成ueditor富文本编辑器的实例

特别注意:一定要实例化

nodejs后台集成ueditor富文本编辑器的实例百度的这个富文本编辑器提供了很多种api 具体的请看

nodejs后台集成ueditor富文本编辑器的实例

8 由于我使用form(post)方式向mysql数据库添加数据,所以在点击提交的按钮的时候,将富文本编辑器里面的内容 添加到 form的一个input里面

$('button[type="submit"]').click(function () {
      var conData = getContent();
      $('input.content').val(conData);
});

9 效果展示 --

nodejs后台集成ueditor富文本编辑器的实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

NodeJs 相关文章推荐
利用NodeJS和PhantomJS抓取网站页面信息以及网站截图
Nov 18 NodeJs
基于html5和nodejs相结合实现websocket即使通讯
Nov 19 NodeJs
Windows 系统下设置Nodejs NPM全局路径
Apr 26 NodeJs
深入nodejs中流(stream)的理解
Mar 27 NodeJs
nodejs入门教程二:创建一个简单应用示例
Apr 24 NodeJs
NodeJS 实现手机短信验证模块阿里大于功能
Jun 19 NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 NodeJs
Nodejs 发布自己的npm包并制作成命令行工具的实例讲解
May 15 NodeJs
nodejs读取本地中文json文件出现乱码解决方法
Oct 10 NodeJs
如何让Nodejs支持H5 History模式(connect-history-api-fallback源码分析)
May 30 NodeJs
NodeJS多种创建WebSocket监听的方式(三种)
Jun 04 NodeJs
如何利用nodejs实现命令行游戏
Nov 24 NodeJs
nodejs开发微信小程序实现密码加密
Jul 11 #NodeJs
nodejs接入阿里大鱼短信验证码的方法
Jul 10 #NodeJs
Nodejs之TCP服务端与客户端聊天程序详解
Jul 07 #NodeJs
Nodejs之http的表单提交
Jul 07 #NodeJs
nodeJS(express4.x)+vue(vue-cli)构建前后端分离实例(带跨域)
Jul 05 #NodeJs
nodejs模块学习之connect解析
Jul 05 #NodeJs
详解HTTPS 的原理和 NodeJS 的实现
Jul 04 #NodeJs
You might like
探讨PHP中OO之静态关键字以及类常量的详解
2013/06/07 PHP
PHP URL参数获取方式的四种例子
2014/02/28 PHP
PHP 7的一些引人注目的新特性简单介绍
2015/11/08 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
thinkPHP3.2.3实现阿里大于短信验证的方法
2018/06/06 PHP
javascript的trim,ltrim,rtrim自定义函数
2008/09/21 Javascript
说说掌握JavaScript语言的思想前提想学习js的朋友可以看看
2009/04/01 Javascript
jQuery筛选器children()案例详解(图文)
2013/02/17 Javascript
JavaScript中的console.time()函数详细介绍
2014/12/29 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
avalon js实现仿google plus图片多张拖动排序附源码下载
2015/09/24 Javascript
基于jQuery实现点击列表加载更多效果
2016/05/31 Javascript
js实现表单提交后不重新刷新当前页面
2016/11/30 Javascript
vue 添加vux的代码讲解
2017/11/30 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
webpack热模块替换(HMR)/热更新的方法
2018/04/05 Javascript
JS实现移动端点击按钮复制文本内容
2019/07/28 Javascript
vue单页应用的内存泄露定位和修复问题小结
2019/08/02 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
[02:51]2018年度DOTA2最佳中单位选手-完美盛典
2018/12/17 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
举例讲解Python设计模式编程中的访问者与观察者模式
2016/01/26 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python 产生token及token验证的方法
2018/12/26 Python
python+pyqt5实现图片批量缩放工具
2019/03/18 Python
python装饰器相当于函数的调用方式
2019/12/27 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
python如何利用paramiko执行服务器命令
2020/11/07 Python
Swanson中国官网:美国斯旺森健康产品公司
2021/03/01 全球购物
ruby如何进行集成操作?Ruby能进行多重继承吗?
2013/10/16 面试题
研发工程师的岗位职责
2013/11/18 职场文书
经济与贸易专业应届生求职信
2013/11/19 职场文书
白血病募捐倡议书
2014/05/14 职场文书
完整版商业计划书
2014/09/15 职场文书
中学生旷课检讨书模板
2014/10/08 职场文书
致创业的您:这类人不适合餐饮创业
2019/08/19 职场文书