Node.js后台集成UEditor富文本编辑器的完整配置指南

作者:后端茶话时间:2026-10-22 05:55:11浏览:609

本文详细介绍如何在Node.js项目中集成百度UEditor富文本编辑器。涵盖从下载Node.js版本、配置静态资源、安装依赖,到编写后端路由处理文件上传及前端实例化编辑器的完整流程。包含关键代码示例与注意事项,帮助开发者快速实现后台文章发布功能。

UEditor简介与Node.js集成概述

UEditor是百度Web前端研发部推出的所见即所得富文本Web编辑器,具备轻量级、可定制性强及注重用户体验等特点。该编辑器基于MIT协议开源,允许用户自由使用和修改代码。

Node.js环境下的UEditor配置步骤

第一步:下载UEditor的Node.js版本。

第二步:复制public目录下的相关文件。

UEditor简介与Node.js集成概述

将上述文件复制到项目的静态资源public文件夹中。

UEditor简介与Node.js集成概述

第三步:在项目根目录下创建一个名为ueditor的文件夹。

UEditor简介与Node.js集成概述

需要复制到该文件夹的内容包括UEditor的核心资源文件。

UEditor简介与Node.js集成概述

第四步:在项目根目录的ueditor文件夹下执行npm install命令,安装package.json中定义的依赖模块。

第五步:在项目根目录创建ue.js文件,部分代码参考自官方示例。

UEditor简介与Node.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。

第六步:配置路由。在根目录的app.js文件中,通过use()方法匹配所有以/ueditor/ue开头的路由,使其指向该路由处理逻辑。

UEditor简介与Node.js集成概述

前端集成与数据提交方案

第七步:在后台模板中使用富文本编辑器,主要用于文章发布场景。

UEditor简介与Node.js集成概述

UEditor简介与Node.js集成概述

特别注意:在前端页面中必须正确实例化编辑器。

UEditor简介与Node.js集成概述百度UEditor提供了丰富的API接口,具体用法请参考官方文档。

UEditor简介与Node.js集成概述

第八步:由于使用form(post)方式向MySQL数据库添加数据,在点击提交按钮时,需通过JavaScript将富文本编辑器内的内容获取并赋值给form表单中的一个input字段,以便后端接收。


$('button[type="submit"]').click(function () {
      var conData = getContent();
      $('input.content').val(conData);
});

第九步:效果展示。

UEditor简介与Node.js集成概述

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

作者最新文章