• nodejs后台集成富文本编辑器(ueditor)


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

  • 相关阅读:
    oracle表分区管理partition
    winfrom 界面编辑之疑难杂症
    resx文件引用
    mysql 数据库名含“-”
    KNN算法之图像处理二
    KNN算法之图像处理一
    DCOM初步窥探二
    dcom初步窥探一
    .net组件和com组件&托管代码和非托管代码
    c# apache服务器请求得到数据(初级)
  • 原文地址:https://www.cnblogs.com/easyweb/p/6642065.html
Copyright © 2020-2023  润新知