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 相关文章推荐
golang、python、php、c++、c、java、Nodejs性能对比
Mar 12 NodeJs
nodejs 实现模拟form表单上传文件
Jul 14 NodeJs
使用nodejs开发cli项目实例
Jun 03 NodeJs
nodejs如何获取时间戳与时间差
Aug 03 NodeJs
Nodejs下DNS缓存问题浅析
Nov 16 NodeJs
nodejs基础应用
Feb 03 NodeJs
详解nodejs异步I/O和事件循环
Jun 07 NodeJs
NodeJS简单实现WebSocket功能示例
Feb 10 NodeJs
搭建一个nodejs脚手架的方法步骤
Jun 28 NodeJs
NodeJs 实现简单WebSocket即时通讯的示例代码
Aug 05 NodeJs
nodejs环境使用Typeorm连接查询Oracle数据
Dec 05 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中文本数据翻页(留言本翻页)
2006/10/09 PHP
PHP IPV6正则表达式验证代码
2010/02/16 PHP
分享一个php 的异常处理程序
2014/06/22 PHP
WordPress中给媒体文件添加分类和标签的PHP功能实现
2015/12/31 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP+AJAX 投票器功能
2017/11/11 PHP
jQuery与其它库冲突的解决方法
2010/06/25 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
jquery常用操作小结
2014/07/21 Javascript
jQuery.Highcharts.js绘制柱状图饼状图曲线图
2015/03/14 Javascript
jQuery实现的placeholder效果完整实例
2016/08/02 Javascript
AngularJS删除路由中的#符号的方法
2016/09/20 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
js+css实现打字效果
2020/06/24 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
vue通过指令(directives)实现点击空白处收起下拉框
2018/12/06 Javascript
Python中str is not callable问题详解及解决办法
2017/02/10 Python
Python中你应该知道的一些内置函数
2017/03/31 Python
pycharm在调试python时执行其他语句的方法
2018/11/29 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
解决Python列表字符不区分大小写的问题
2019/12/19 Python
pycharm 2018 激活码及破解补丁激活方式
2020/09/21 Python
Python脚本打包成可执行文件过程解析
2020/10/20 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
德国综合购物网站:OTTO
2018/11/13 全球购物
在weblogic中发布ejb需涉及到哪些配置文件
2012/01/17 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
博士生导师推荐信
2014/07/08 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
聊聊JS ES6中的解构
2021/04/29 Javascript
python开发制作好看的时钟效果
2022/05/02 Python