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