nodejs express框架如何使用ueditor

qingfeng206

已于 2022-06-08 22:38:34 修改

阅读量279

点赞数

分类专栏： nodejs 文章标签： node.js javascript

于 2022-06-08 22:35:05 首次发布

本文链接：https://blog.csdn.net/qingfeng206/article/details/125193706

版权

nodejs 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

我的express网站需要文字输入，富文本编辑器很多，选定百度的Ueditor，下面就记录下具体怎么操作的吧，

1、安装

npm install ueditor --save

2、app.js中插入下面代码

var ueditor = require("ueditor")

app.use("/ueditor/ue", ueditor(path.join(__dirname, 'public'), function(req, res, next) {
    //客户端上传文件设置
    var imgDir = '/img/ueditor/'
    var ActionType = req.query.action;
    if (ActionType === 'uploadimage' || ActionType === 'uploadfile' || ActionType === 'uploadvideo') {
        var file_url = imgDir; //默认图片上传地址
        /*其他上传格式的地址*/
        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') {
        var dir_url = imgDir;
        res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
    }
    // 客户端发起其它请求
    else {
        // console.log('config.json')
        res.setHeader('Content-Type', 'application/json');
        res.redirect('/ueditor/nodejs/config.json');
    }
}));

3、复制文件到项目的public文件夹中

https://github.com/netpi/ueditor/tree/master/example/public/ueditor

在这里插入图片描述

4、模板文件插入下面代码

<!-- <head>标签内插入 -->
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="/ueditor/lang/zh-cn/zh-cn.js"> </script>
<!-- <head>标签内插入 -->

<!-- 在需要用到编辑器的位置插入 -->
<script id="editor" type="text/plain" style="width:1024px;height:500px;" name="content"></script>

<!-- 底部插入 -->
<script type="text/javascript">
var ue = UE.getEditor('editor');
</script>