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访问ActiveX对象,以操作Access数据库为例。
Dec 15 NodeJs
NodeJS的模块写法入门(实例代码)
Mar 07 NodeJs
nodejs开发环境配置与使用
Nov 17 NodeJs
NodeJS Web应用监听sock文件实例
Feb 18 NodeJs
nodejs中使用多线程编程的方法实例
Mar 24 NodeJs
nodejs爬虫抓取数据乱码问题总结
Jul 03 NodeJs
详解nodejs操作mongodb数据库封装DB类
Apr 10 NodeJs
nodejs和C语言插入mysql数据库乱码问题的解决方法
Apr 14 NodeJs
nodeJS实现路由功能实例代码
Jun 08 NodeJs
NodeJs实现定时任务的示例代码
Dec 05 NodeJs
Nodejs中的JWT和Session的使用
Aug 21 NodeJs
NodeJs crypto加密制作token的实现代码
Nov 15 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正则取img标记中任意属性(正则替换去掉或改变图片img标记中的任意属性)
2013/08/13 PHP
php实现从上传文件创建缩略图的方法
2015/04/02 PHP
php + nginx项目中的权限详解
2017/05/23 PHP
Aster vs Newbee BO5 第三场2.19
2021/03/10 DOTA
Javascript注入技巧
2007/06/22 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
JavaScript中各种引用类型的常用操作方法小结
2016/05/05 Javascript
基于jquery实现智能表单验证操作
2016/05/09 Javascript
详解js中call与apply关键字的作用
2016/11/21 Javascript
jQuery的extend方法【三种】
2016/12/14 Javascript
Angular.JS去掉访问路径URL中的#号详解
2017/03/30 Javascript
websocket+node.js实现实时聊天系统问题咨询
2017/05/17 Javascript
详解webpack 打包文件体积过大解决方案(code splitting)
2018/04/10 Javascript
Angular网络请求的封装方法
2018/05/22 Javascript
js实现倒计时器自定义时间和暂停
2019/02/25 Javascript
一文搞懂ES6中的Map和Set
2019/05/20 Javascript
uni-app从安装到卸载的入门教程
2020/05/15 Javascript
Python实现基于HTTP文件传输实例
2014/11/08 Python
Python数据分析库pandas基本操作方法
2018/04/08 Python
django加载本地html的方法
2018/05/27 Python
在Python中定义一个常量的方法
2018/11/10 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python判断两个序列的成员是否一样的实例代码
2020/03/01 Python
python字典的值可以修改吗
2020/06/29 Python
css3选择器基本介绍
2014/12/15 HTML / CSS
纯CSS3实现的阴影效果
2014/12/24 HTML / CSS
HTML5 Canvas基本线条绘制的实例教程
2016/03/17 HTML / CSS
《湘夫人》教学反思
2014/02/21 职场文书
城市精细化管理实施方案
2014/03/04 职场文书
关于晚自习早退的检讨书
2014/09/13 职场文书
学习十八大标语
2014/10/09 职场文书
政协会议宣传标语
2014/10/09 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
2016年会领导致辞稿
2015/07/29 职场文书
朋友圈早安励志语录!
2019/07/08 职场文书