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富文本编辑器的实例

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

标签:
node,UEditor,node,富文本编辑器,nodejs,富文本编辑器

免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。