html富文本编辑器与nodejs,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 效果展示 --

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 ...

百度富文本编辑器UEditor安装配置全过程

网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式     你可以去百度UEditor ...

百度富文本编辑器ueditor使用总结

最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.youkuaiyun.com/wusuopubupt/arti ...

富文本编辑器UEditor自定义工具栏(二、插入图片、音频、视频个性化功能按钮和弹层及自定义分页符)

导读:本篇将简单探讨插入图片.音频.视频的功能按钮实现方式 传送门:富文本编辑器UEditor自定义工具栏(一.基础配置与字体.背景色.行间距.超链接实现) 一.效果图 1.UEditor自定义工具栏 ...

百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明

====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...

随机推荐

No compatible targets were found.Do you wish to...的解决方案。

首先看问题,这个错误是说明没有android虚拟机,那么新建一个就OK了. 假如出现了这个状况:就点击yes,然后new一个: 添加Name等等的属性,点击ok,再运行就可以了. 这种情况一般是第一次 ...

atitit. applet 浏览器插件 控件 的环境，开发，提示总结o9o

atitit. applet 浏览器插件 控件 的环境,开发,提示总结o9o 1. 建立applet:: 1 2. Applet 码 1 3. Applet (awt)跟japplet (swing) ...

[ZT]Language codes – MFC

Below is table with all MFC language codes. I think it can be sometimes very useful.  First column c ...

Android手机分辨率基础知识(DPI,DIP计算)

1.术语和概念 概念解释 名词 解释 Px (Pixel像素) 不同设备显示效果相同.这里的“相同”是指像素数不会变,比如指定UI长度是100px,那不管分辨率是多少UI长度都是100px.也正是因为 ...

uva 1210

#include #include using namespace std; + ; bool notprime[MAXN];//值为fa ...

input 类型为number型时，maxlength不生效？

input 类型为number型时,maxlength不生效? 可以加oninput属性来控制最大长度: