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学习笔记之Connect中间件模块(一)
Jan 27 NodeJs
Nodejs实现批量下载妹纸图
May 28 NodeJs
实例分析nodejs模块xml2js解析xml过程中遇到的坑
Mar 18 NodeJs
深入解析nodejs HTTP服务
Jul 25 NodeJs
解决Nodejs全局安装模块后找不到命令的问题
May 15 NodeJs
nodejs中用npm初始化来创建package.json的实例讲解
Oct 10 NodeJs
NodeJS搭建HTTP服务器的实现步骤
Oct 12 NodeJs
nodejs 使用nodejs-websocket模块实现点对点实时通讯
Nov 28 NodeJs
关于NodeJS中的循环引用详解
Jul 23 NodeJs
nodejs使用node-xlsx生成excel的方法示例
Aug 22 NodeJs
ubuntu系统下使用pm2设置nodejs开机自启动的方法
May 12 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利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP十六进制颜色随机生成器功能示例
2017/07/24 PHP
PHP框架实现WebSocket在线聊天通讯系统
2019/11/21 PHP
node.js+Ajax实现获取HTTP服务器返回数据
2014/11/26 Javascript
jQuery中:empty选择器用法实例
2014/12/30 Javascript
JavaScript分析、压缩工具JavaScript Analyser
2014/12/31 Javascript
基于javascript、ajax、memcache和PHP实现的简易在线聊天室
2015/02/03 Javascript
jquery.uploadify插件在chrome浏览器频繁崩溃解决方法
2015/03/01 Javascript
javascript实现带下拉子菜单的导航菜单效果
2015/05/14 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
2015/08/25 Javascript
jquery输入数字随机抽奖特效的简单实现代码
2016/06/10 Javascript
实现点击下箭头变上箭头来回切换的两种方法【推荐】
2016/12/14 Javascript
javaScript中封装的各种写法示例(推荐)
2017/07/03 Javascript
JS加密插件CryptoJS实现的DES加密示例
2018/08/16 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
Vue服务端渲染实践之Web应用首屏耗时最优化方案
2019/03/22 Javascript
微信小程序云开发之数据库操作
2019/05/18 Javascript
Vue路由前后端设计总结
2019/08/06 Javascript
VUE 解决mode为history页面为空白的问题
2019/11/01 Javascript
js利用拖放实现添加删除
2020/08/27 Javascript
[13:18]《一刀刀一天》之DOTA全时刻21:详解TI新赛制 A队再露獠牙
2014/06/24 DOTA
使用python3.5仿微软记事本notepad
2016/06/15 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
pytorch + visdom CNN处理自建图片数据集的方法
2018/06/04 Python
python 数据提取及拆分的实现代码
2019/08/26 Python
Python 处理日期时间的Arrow库使用
2020/08/18 Python
借助HTML5 Canvas API制作一个简单的猜字游戏
2016/03/25 HTML / CSS
香港钟表珠宝首饰商城:OneMallTime网摩间
2016/10/14 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
StubHub澳大利亚:购买或出售您的门票
2019/08/01 全球购物
电子商务个人自荐信
2013/12/12 职场文书
资金主管岗位职责范本
2014/03/04 职场文书
毕业生应聘求职信
2014/07/10 职场文书
红领巾广播站广播稿
2015/08/19 职场文书
使用python+pygame开发消消乐游戏附完整源码
2021/06/10 Python
win10系统xps文件怎么打开?win10打开xps文件的两种操作方法
2022/07/23 数码科技