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
 
原文地址:https://www.cnblogs.com/Chen-xy/p/4466425.html