nodejs后台集成富文本编辑器(ueditor)
1 下载ueditor nodejs版本
2 复制public目录下面的文件

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

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

要复制进来的内容为

4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块
5 项目根目录下创建 ue.js 代码部分来自于

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,都会走 这个路由

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


特别注意:一定要实例化
百度的这个富文本编辑器提供了很多种api 具体的请看

8 由于我使用form(post)方式向mysql数据库添加数据,所以在点击提交的按钮的时候,将富文本编辑器里面的内容 添加到 form的一个input里面
$('button[type="submit"]').click(function () {
var conData = getContent();
$('input.content').val(conData);
});
9 效果展示 --

nodejs后台集成富文本编辑器(ueditor)的更多相关文章
- Xadmin集成富文本编辑器ueditor
在xadmin中通过自定义插件,实现富文本编辑器,效果如下: 1.首先,pip安装ueditor的Django版本: pip install DjangoUeditor 2.之后需要添加到项目的set ...
- Django xadmin后台添加富文本编辑器UEditor的用法
效果图: 步骤: 1.利用命令:pip install DjangoUeditor,安装DjangoUeditor,但由于DjangoUeditor没有python3版本的,从的Github上把修改好 ...
- django—xadmin中集成富文本编辑器ueditor
一.安装 pip命令安装,由于ueditor为百度开发的一款富文本编辑框,现已停止维护,如果解释器为python2,则直接pip install djangoueditor 解压包安装,python3 ...
- django后台集成富文本编辑器Tinymce的使用
富文本编辑器Tinymce是使用步骤: 1.首先去python的模块包的网站下载一个django-tinymce的包 2.下载上图的安装包,然后解压,进入文件夹,执行: (pychrm直接运行命令pi ...
- Django使用xadmin集成富文本编辑器Ueditor(方法二)
一.xadmin的安装与配置1.安装xadmin,其中第一种在python3中安装不成功,推荐第二种或者第三种 方式一:pip install xadmin 方式二:pip install git+g ...
- AngularJS集成富文本编辑器
最近在Angular中需要集成富文本编辑器,本来已经集成好百度的UEditor,后台觉得配置太多,让我弄个别的,然后就找到了wangEditor,这个配置和上手都要简单一些,下面来看看具体操作步骤吧: ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- 富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)
导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...
随机推荐
- JVM(二)JVM内存布局
这几天我再次阅读了<深入理解Java虚拟机>之第二章"Java内存区域与内存溢出异常",同时也参考了一些网上的资料,现在把自己的一些认识和体会记录一下. (本文为博主 ...
- oracle数据块核心剖析
详见: http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp57 数据块(Oracle Data Blocks),本文简称为" ...
- Java基础学习 —— bat处理文件
bat处理文件:就是一次性可以执行多个命令的文件 为什么要学bat处理文件? 快速运行一个软件我一般都会打包成jar包的形式来执行jar双击对图形界面管用 但是对控制台的程序是不起作用的.对于控制台的 ...
- 对于c语言存储分配程序(malloc函数)实现的理解
内容主要出自<The C Programming Language>一书,不得不说这是一本程序员必读的书,我大二读了前面几章就扔到一边了,直到最近才又拿起来再读,找不到言语来形容我现在后悔 ...
- C# 模拟网站登陆并截图
1.在窗体上加一个按钮,为按钮添加点击事件 private void button1_Click(object sender, EventArgs e) { Bitmap m_Bitmap = Web ...
- 关于js中单双引号以及转义符的理解
关于js中单引号(')和双引号(")的使用以及转义的理解 这几天一直在画页面,身为开发人员的我之所以要画页面是因为当前项目中的页面上所有的东西都是从数据库中取得的,也就是动态的,类似于我们设 ...
- JavaScript 的使用基础总结③
JavaScript 中的对象 JavaScript 中的所有事物都是对象:字符串.数值.数组.函数... JavaScript 允许自定义对象. (一)数组 数组对象的作用是:使用单独的变量名来存储 ...
- 201521123122 《java程序设计》第七周学习总结
201521123122 <java程序设计>第七周实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 ArrayList代码分析 1.1 ...
- 201521123079《java程序设计》第6周学习总结
1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图,对面向对象思想进行一个总结. 注1:关键词与内容不求多,但概念之间的联系要清晰,内容覆盖 ...
- 201521123011 《Java程序设计》第4周学习总结
1. 本周学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 答:1.super() 子类不能继承父类的构造方法,但可以通过super关键字去访问父类的构 ...