UEditor是由百度网络前端研发部开发所见即所得富文本网络编辑器,具有轻量,可定制,注重用户体验等特点,开源基于麻省理工学院协议,允许自由使用和修改代码. .
1下载ueditor nodejs版本
2复制公共目录下面的文件
到项目静态资源公共文件夹下
3在项目根目录创建ueditor文件夹
要复制进来的内容为
4在根目录的ueditor文件夹下执行npm安装安装此目录下面package.json依赖的模块
5项目根目录下创建问题。js代码部分来自于
问题。js代码
const表达=要求(“表达”),
路径=要求(“路径”),
ueditor=要求(“。/ueditor/?,
路由器=express.Router ();
router.use (“/? ueditor (path.join (process.cwd(),“公共”),函数(下)要求,res, {//客户端上传文件设置//console.log (req.query.action);
让ActionType=req.query.action;
如果(ActionType===' uploadimage ' | | ActionType==='还是' | | ActionType===uploadvideo) {
让file_url=/img/ueditor/,//默认图片上传地址/*其他上传格式的地址*/如果(ActionType==='还是'){
file_url='/文件/ueditor/';//附件
}
如果(ActionType===uploadvideo) {
file_url='/视频/ueditor/';//视频
}
res.ue_up (file_url);//你只要输入要保存的地址。保存操作交给ueditor来做
res.setHeader(“内容类型”、“text/html”);
}//客户端发起图片列表请求
else if (req.query。action===listimage) {
让dir_url='/img/ueditor/';
res.ue_list (dir_url);//客户端会列出dir_url目录下的所有图片
如果(req.query}其他。action===listfile) {
让dir_url='/文件/ueditor/';
res.ue_list (dir_url);//客户端会列出dir_url目录下的所有图片
}//客户端发起其它请求
其他{//console.log (json)
res.setHeader(“内容类型”、“application/json”);
res.redirect ('/ueditor/nodejs/json ');
}
}));
模块。出口=路由器;
之前
特别说明默认ueditor上传的图片路径为公共/img/ueditor
6路由设置根目录下app.js()()匹配的所有的路由/ueditor/问题,都会走这个路由
7后台模板使用富文本编辑器——这里我后台主要发布文章的时候用到富文本编辑器
特别注意:一定要实例化
8由于我使用形式(post)方式向mysql数据库添加数据,所以在点击提交的按钮的时候,将富文本编辑器里面的内容添加到形式的一个输入里面
$('按钮(type=疤峤弧?)。点击(函数(){
var conData=https://www.yisu.com/zixun/getContent ();
$ (' input.content ') .val (conData);
});
9效果展示——
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
