这里是我费了一天的心思总算成功的搞好了 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/....目录下,你可以仔细对比以下我的代码,访问路径与存储路径是一致的。
所以我图片上传之后能够立马显示出来。
呼呼,没想到配个富文本编辑器这么多的小麻烦,希望你们配置顺利。