node.js 集成 ueditor 步骤及注意事项

这里是我费了一天的心思总算成功的搞好了 node.js 与 ueditor 集成的过程。

做一个小白真难啊,非摸着石头过河。今天心好累,要多说一点废话。

完成这个内容之前,首先你得保证你引用ueditor的界面在 nodejs 项目中。以我的界面为例,就在 myapp/public 下。

我的项目目录如下:


如果不再同个项目下,就会出现跨域问题,解决了 HTTP 没配置好之后,会告诉你各种文件出错,各种引用不到。因为它们不在同一个域名内,引用会出问题。至于我为什么知道,因为我一天就死在这个跨域问题上了啊摔!最后我实在累了,不想解决跨域问题了,就把他们搞到一个项目目录下了。

然后,下载 ueditor for nodejs 分享在这里快给我点赞!

解压后目录如下:


将example/pulic 下的 stylesheets 和 ueditor 放到 myapp 下的 public目录下:


然后在 myapp 下新建文件夹 ueditor


把以下文件复制进去:


然后 win+R 命令行,进入myapp 下的 ueditor 目录,运行 npm install


然后此时再在界面中引入,主要代码如下:


讲道理,这个时候,你 ctrl+B 运行以下 bin 目录下的 www 文件,然后再输入网址,就可以看见编辑框了。

注意看鼠标点进编辑框的时候,这个图标是不是亮的:


如果不是亮的,就要再配置一波。

首先把 myapp/public/ueditor/nodejs 下的 config.json 复制到 myapp/public/ueditor/ 目录下,并重命名为 ueditor.config.json


然后再改一波。这个我也不知道到底有没有必要,今天辛苦了,就不再测试了,下次更新吧。反正我最后成功了就对了。

把 myapp/public/ueditor/ueditor.config.js  服务器路径改一波:


然后把 myapp/public/ueditor/ueditor.config.json  和 myapp/public/ueditor/nodejs/config.json 带有 prefix 且没有参数都加上 访问域名:


好了,差不多到最后一步了。

新建 ueditor.js ,加上如下代码:

const express = require('express'),
    path = require('path'),
    ueditor = require("../ueditor/"),
    router = express.Router();



router.use("/",ueditor(path.resolve(__dirname, '../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 =  '/ueditor/upload/image/';//默认图片上传地址
        /*其他上传格式的地址*/
        if(ActionType === 'uploadfile'){
            file_url = '/ueditor/upload/file'; //附件
        }
        if(ActionType === 'uploadvideo'){
            file_url = '/ueditor/upload/video'; //视频
        }
        res.ue_up(file_url); //你只要输入要保存的地址 。保存操作交给ueditor来做
        res.setHeader('Content-Type','text/html');
    }
    //  客户端发起图片列表请求
    else if(req.query.action === 'listimage'){
        let dir_url = '/ueditor/upload/img/';
        res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
    }else if(req.query.action === 'listfile'){
        let dir_url = '/ueditor/upload/file';
        res.ue_list(dir_url); // 客户端会列出 dir_url 目录下的所有图片
    }
    // 客户端发起其它请求
    else{
        // console.log('config.json')
        res.setHeader('Content-Type','application/json');
        res.redirect('/ueditor/ueditor.config.json')
    }
}));
module.exports = router;

然后在 app.js 引用它。





主要代码是这三行。我配置到这一步,已经能基本搞好了。一定要注意路径。

还有最后一个问题,就是图片上传问题,不能及时的回显。要注意在 uedtior.js 里配置的存储路径和 config.json 里面配置的路径要一直,不然访问不到。


这一行我把图片存在了 myapp/puclic/....目录下,你可以仔细对比以下我的代码,访问路径与存储路径是一致的。

所以我图片上传之后能够立马显示出来。

呼呼,没想到配个富文本编辑器这么多的小麻烦,希望你们配置顺利。

猜你喜欢

转载自blog.csdn.net/wsh2467991332/article/details/79967230