Nodejs之编辑器ueditor

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文件所在的位置，及我的路径

然后修改ueditor.config.js文件，修改内容如下

 

URL为编辑器资源文件根路径，serverUrl为请求后台的路径，上传图片时会用到。

修改editor_api.js文件，editor_api.js是加载所有js依赖的文件，修改如下:

运行app.js，打开后http://localhost:3000，即可看到文本编辑框界面。

 

4.配置后台，上传图片

 

打开app.js，修改配置文件

该配置用于接收前台界面上传单张及多张图片的请求。

需要在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