html富文本编辑器与nodejs,nodejs后台集成ueditor富文本编辑器的实例_忘却_前端开发者...

本文介绍了如何在Node.js项目中集成百度的富文本编辑器UEditor。首先,从官方下载并复制所需文件到项目静态资源目录,然后在项目根目录创建ueditor文件夹并安装依赖。接着,设置UEditor的上传路径,并在app.js中配置路由。在提交表单时,将UEditor内容转换为表单字段。最后展示了实现后的效果。
摘要由CSDN通过智能技术生成

UEditor是由百度开发所见即所得富文本

1 下载ueditor nodejs版本

2 复制public目录下面的文件

56abc53e1a03fc1ebdbab5ade009e99f.png

到项目静态

db2dac916600d03100ec1a0a8dae6382.png

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

9333d03460c843b8c69fe40667cf0ede.png

要复制进来的内容为

4d9c06aed311d26bb6fc8e12caf6ea75.png

4 在根目录的 ueditor文件夹下执行 npm install 安装此目录下面package.json依赖的模块

5 项目根目录下创建 ue.

57b3de1cc3633f1e28c2e56b1c5544c5.png

ue.

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/

特别说明 默认ueditor上传的图片路径为 public/img/ueditor

6 路由设置 根目录下 app.js —use()匹配的所有的路由/ueditor/ue,都会走 这个路由

f15c55aa3f1c36f269b172730d780e3a.png

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

9f6c96b5625537789f1c0fccc30c6410.png

794c28febe8b2d1dfc302d4098974efc.png

特别注意:一定要实例化

03ff00a8f30caeee98b700a3ffcc3011.png百度的这个富文本编辑器提供了很多种api 具体的请看

4ba787144ecebc0655b8572eb0e4f192.png

8 由于我使用form(post)方式向mysql数据库添加数据,所以在点击提交的按钮的时候,将富文本编辑器里面的内容 添加到 form的一个input里面

$('button[type="submit"]').click(function () {

var conData = getContent();

$('input.content').val(conData);

});

9 效果展示 —

3c03e51418328fed8fd952d6364a6836.png

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值