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爬虫抓取数据之编码问题
Jul 03 NodeJs
windows下安装nodejs及框架express
Aug 07 NodeJs
详解Nodejs的timers模块
Dec 22 NodeJs
nodeJs链接Mysql做增删改查的简单操作
Feb 04 NodeJs
nodejs根据ip数组在百度地图中进行定位
Mar 06 NodeJs
深入理解nodejs中Express的中间件
May 19 NodeJs
nodejs中sleep功能实现暂停几秒的方法
Jul 12 NodeJs
nodejs基于WS模块实现WebSocket聊天功能的方法
Jan 12 NodeJs
webstorm中配置nodejs环境及npm的实例
May 15 NodeJs
nodejs语言实现验证码生成功能的示例代码
Oct 13 NodeJs
nodejs中使用worker_threads来创建新的线程的方法
Jan 22 NodeJs
分享五个Node.js开发的优秀实践 
Apr 07 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 广告点击统计代码(php+mysql)
2018/02/21 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP高并发和大流量解决方案整理
2019/12/24 PHP
PHP执行普通shell命令流程解析
2020/08/24 PHP
在线编辑器中换行与内容自动提取
2009/04/24 Javascript
jquery $.ajax()取xml数据的小问题解决方法
2010/11/20 Javascript
js Dialog 去掉右上角的X关闭功能
2014/04/23 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
基于AngularJs + Bootstrap + AngularStrap相结合实现省市区联动代码
2016/05/30 Javascript
1秒50万字!js实现关键词匹配
2016/08/01 Javascript
JavaScript中各数制转换全面总结
2017/08/21 Javascript
最实用的JS数组函数整理
2017/12/05 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
原生js实现购物车
2020/09/23 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
python调用Moxa PCOMM Lite通过串口Ymodem协议实现发送文件
2014/08/15 Python
在Python中使用列表生成式的教程
2015/04/27 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
PyQt5利用QPainter绘制各种图形的实例
2017/10/19 Python
django的ORM模型的实现原理
2019/03/04 Python
python基于TCP实现的文件下载器功能案例
2019/12/10 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
收集的7个CSS3代码生成工具
2010/04/17 HTML / CSS
BIFFI美国站:意大利BIFFI BOUTIQUES豪华多品牌时装零售公司
2020/02/11 全球购物
会计专业毕业生自我鉴定
2013/10/29 职场文书
个人查摆剖析材料
2014/02/04 职场文书
募捐倡议书怎么写
2014/05/14 职场文书
庆六一开幕词
2015/01/29 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
MySQL系列之六 用户与授权
2021/07/02 MySQL
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
解决pycharm下载库时出现Failed to install package的问题
2021/09/04 Python