ueditor编辑器的使用说明。 最近在找nodejs前台界面可以编辑文字发表文章的工具,后来找到了ueditor,感觉还不错,就拿来使用了一下,使用过程如下。
1.下载及准备
下载ueditor,官方地址http://ueditor.baidu.com/website/download.html
示例中使用的是1.4.3完整版。
新建项目ueditors并支持ejs模板,
然后修改ejs文件的后缀名为html,
前面文章都有说明,此处不再一一详解。
2.导入
在package.json中加入依赖包ueditor,并npm install,
将从官网下载好的ueditor包放在public静态目录下。
public目录是开启端口后默认找到的目录,
若想放到其他目录,修改下面这句即可。
app.use(express.static(path.join(__dirname, 'public')));
3.使用
因为只是简单的示例,这里我们直接从ueditor下的_examples中复制completeDemo.html中的代码到
我们的views目录下的index.html文件中。然后修改要导入js文件的src
图中为我ueditor文件所在的位置,及我的路径
![](https://i-blog.csdnimg.cn/blog_migrate/1ec84b9be026958cd42ea260b0006d48.jpeg)
然后修改ueditor.config.js文件,修改内容如下
![](https://i-blog.csdnimg.cn/blog_migrate/9aff781caef56c9a91c0b4399df90e62.jpeg)
URL为编辑器资源文件根路径,serverUrl为请求后台的路径,上传图片时会用到。
修改editor_api.js文件,editor_api.js是加载所有js依赖的文件,修改如下:
![](https://i-blog.csdnimg.cn/blog_migrate/fe5bcd0b158b3c4505bfe65d27c25ae2.jpeg)
4.配置后台,上传图片
打开app.js,修改配置文件
![](https://i-blog.csdnimg.cn/blog_migrate/073916e90a7501311d38fe9e2932b954.jpeg)
该配置用于接收前台界面上传单张及多张图片的请求。
需要在ueditor中创建一个image文件夹,用以保存上传的图片。
需要配置config.json文件,直接将php目录中的config.json复制出来就行。
配置好后重新启动,应该就能上传图片了。
5.注意事项
1.之前在使用时出现的大部分问题,都是导入js文件,路径出现的问题。碰到这种情况,打开开发者工具,导
入js文件时会发送get请求,查看请求地址在哪,然后调试,一般都能解决。
2.editor_api.js中导入js依赖文件时,是以同步的方式导入,而且document.write也会产生一部分问题,假如你
只使用ueditor,当然没问题,但是如果你还要在之前导入其它js文件,则之前导入的文件可能会被清空。
3.关于js的同步及异步,以后会另开一篇文章讨论。
4.简单的项目demo地址在:https://github.com/Chen-xy/ueditors