nodejs后台集成ueditor富文本编辑器的实例

 更新时间:2017年07月11日 15:33:40   作者:Jesonhu  
本篇文章主要介绍了nodejs后台集成ueditor富文本编辑器的实例,具有一定的参考价值,有兴趣的可以了解一下

UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码..

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 效果展示 --

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

相关文章

  • Node.js 中 http 模块的深度剖析与实战应用小结

    Node.js 中 http 模块的深度剖析与实战应用小结

    本文详细介绍了Node.js中的http模块,从创建HTTP服务器、处理请求与响应,到获取请求参数,每个环节都通过代码示例进行解析,旨在帮助开发者熟练掌握http模块,构建高效的网络应用,感兴趣的朋友一起看看吧
    2025-01-01
  • node.js中的事件处理机制详解

    node.js中的事件处理机制详解

    相信接触过编程的同学应该都了解,在访问任何网页的时候,会伴随着许多的事件,例如点击菜单,移动鼠标等等。那么node.js是如何处理的?下面通过这篇文章就来给大家详细的介绍下node.js中的事件处理机制,有需要的朋友们可以参考借鉴,下面来一起学习学习吧。
    2016-11-11
  • 利用adb shell和node.js实现抖音抢红包功能(推荐)

    利用adb shell和node.js实现抖音抢红包功能(推荐)

    这篇文章主要介绍了利用adb shell和node.js实现抖音抢红包功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2018-02-02
  • 详解本地Node.js服务器作为api服务器的解决办法

    详解本地Node.js服务器作为api服务器的解决办法

    本篇文章主要介绍了详解本地Node.js服务器作为api服务器的解决办法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-02-02
  • 一文学会如何升级npm管理的各依赖版本

    一文学会如何升级npm管理的各依赖版本

    npm在前端开发流程中提供了非常完善的自动化工具链,已成为每个前端开发者必备的工具,下面这篇文章主要给大家介绍了关于如何升级npm管理的各依赖版本,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • React+react-dropzone+node.js实现图片上传的示例代码

    React+react-dropzone+node.js实现图片上传的示例代码

    本篇文章主要介绍了React+react-dropzone+node.js实现图片上传的示例代码,非常具有实用价值,需要的朋友可以参考下
    2017-08-08
  • mac下彻底卸载node和npm方法步骤

    mac下彻底卸载node和npm方法步骤

    我们经常在卸载软件的时候会遇到有残留,这样就很难去重新下载,本篇文章就来介绍mac下彻底卸载node和npm及重新安装的方法,有需要的朋友可以借鉴参考下
    2021-09-09
  • 更新npm项目依赖的实现方法

    更新npm项目依赖的实现方法

    依赖管理是其中一个至关重要的环节,本文主要介绍了更新npm项目依赖的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-06-06
  • 利用PM2部署node.js项目的方法教程

    利用PM2部署node.js项目的方法教程

    pm2 = P (rocess) M (anager)2,是可以用于生产环境的Nodejs的进程管理工具,并且它内置一个负载均衡。下面这篇文章主要给大家介绍了利用PM2部署node.js项目的方法教程,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-05-05
  • Linux Centos7.2下安装nodejs&npm配置全局路径的教程

    Linux Centos7.2下安装nodejs&npm配置全局路径的教程

    今天小编就为大家分享一篇Linux Centos7.2下安装nodejs&npm配置全局路径的教程,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-05-05

最新评论