【学习笔记】 ueditor在nodejs中使用

萌新在学nodejs,虽然听别人说这个百度的富文本已经没用了,但是会一样东西还是不错的,这里也是搞了好久,自己终于搞懂了,写下笔记

首先安装下需要的环境

npm i express body-parser art-template express-art-template

在这里插入图片描述
创建需要的文件夹 views,public,upload
在这里插入图片描述
创建app.js进行配置
在这里插入图片描述
在views下创建文件index.html,把ueditor拉进去,现在的github上的ueditor已经和大部分教程的不一样了,我自己又是新手不会用,所以去网上找了jsp的版本(这东西在fastadmin里面要10大洋,我还付钱了…买的还是umditor,ue的阉割版)
在这里插入图片描述
在这里插入图片描述
配置服务器主页

app.get('/', (req, res) => {
    res.render('index.html')
})

启动服务器
在这里插入图片描述
点击输入框后单图无法上传,且多图报错
在这里插入图片描述
这时候下载ueditor的配置环境

npm install ueditor --save

创建ueditor.js并且配置,暴露给app.js
在这里插入图片描述
在这里插入图片描述
这时候页面的报错会更改
在这里插入图片描述
然后我们根据文档在ueditor写入内容,并创建你自己存文件的文件目录
在这里插入图片描述
然后也同样更改文档说的
在这里插入图片描述
修改为ue
在这里插入图片描述
这个时候保存,去页面查看,你会发现报错又变了
在这里插入图片描述
这里是找不到ue
我们再次回到ueditor.config.js
进行修改,这里不再是一开始的controller.jsp,具体不知道怎么说,但是可以打开config.json看一眼应该就知道了
在这里插入图片描述
然后刷新页面
在这里插入图片描述
报错都没有了,但是没法上传图片,会报http的错
在这里插入图片描述
我们再改回ue,打开控制台,打开network(网络),里面找config.json
在这里插入图片描述
在这里插入图片描述
我们可以发现,地址栏不对,这就是只改ue报错的原因,官方文档上也只写了修改成ue,这里给我找错,找了好久。
这时候我们需要修改这里

这是我的目录
这是我的目录
ueditor文件修改位置
在这里插入图片描述
同样的ueditor.config.js
在这里插入图片描述
在这里插入图片描述
此处为根目录,如果你的ueditor在header这个目录里面,那就变成/header/ueditor/
然后我们再次打开刷新页面,报错会再次改变,这也是最后一次报错
在这里插入图片描述
这里报错的地方为
在这里插入图片描述
我们也需要修改他们的目录位置,但是并不是找ueditor.config.js,而是jsp里面的config.js,这里官网说的是找ueditor.config.js,也是让我找了好久
在这里插入图片描述
之后就可以上传图片了,而且单图也可以上传了

然后测试的时候发现自己保存地址写错了,应该是这样的
在这里插入图片描述
然后我们再次进入刷新页面
在这里插入图片描述
已经没有报错了,而且我们也可以上传图片了

单图在这里插入图片描述
多图
在这里插入图片描述
本地文件
在这里插入图片描述

就写到这里了,如果又错误请大佬指正,如果喜欢,点一个赞把,在这里谢谢了
在这里插入图片描述

  • 2
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值