一、关于UEditor
首先得向大家介绍一下UEditor,由于我也是第一次使用,对他也不是特表了解,在此我就引用百度百科的一段话:UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本(以上内容,来自于百度百科)。
说了一大堆,简单来说,就是由百度WEB前端研发部开发的富文本编辑器,可以引用到web页面使用,开源免费,允许二次开发,其功能就像Word,能够对大量文字进行排版,有所不同的是,排版格式能够和HTML以及css兼容,是很多后台文章编辑的首选工具插件。
二、UEditor的下载
介绍说完了,我们就得来看看UEditor的下载了,官方网站:http://ueditor.baidu.com/website/额。。。关于如何下载,我想不需要我多说了,如果这都不会的话,我还是劝你转行吧。。。有一点需要说明的是,由于UEditor官方并不支持nodejs,目前只支持PHP、ASP、JSP三种,我们就先下载PHP版本的,后期对他进行修改和配置,使他支持nodejs。
三、创建nodejs+express项目
在这里我就不去手动创建项目框架了,直接使用webstrom创建一个名为test的项目。建好的项目结构如下:
四、引用UEditor
关于项目结构我就不多说了,直接开始引用UEditor,首先将我们下载好的PHP版本的UEditor解压,如果不出问题的话,应该如下图:
第一步、我们需要做的是在public文件夹下新建一个名为ueditor的文件夹,并将解压的UEditor的所有文件拷贝到ueditor之下,如下图:
第二步、将ueditor文件夹下的PHP文件夹名称修改为nodejs。修改之后如下图:
第三步、在页面当中引用UEditor,来到views文件夹下的index.ejs,首先在head标签当中应用UEditor的js文件,代码:
然后在需要使用UEditor的地方写上:
不知道为什么简书没法张贴代码,我就已截图形式上传,写完这行代码,最后在js里面是实例化:最终代码如下:
这个时候,我们启动项目,在浏览器输入http://localhost:3000/,进入首页,查看效果如图:
五、后台配置
现在的UEditor表面上看起来没什么问题,当我们打开F12审查元素就会发现程序报错,这是由于UEditor会自动检测后台配置,如果后台配置有问题,上传功能将无法使用,接下来就开始后台配置。
首先在app.js里面输入如下代码:
需要注意的是标记位置:第一个标记相信大家都能看到,设置静态资源路径,第二个主要是设置图片保存位置,我们设置的是/images/ueditor/,所以我们需要在public下的images文件夹里面新建一个ueditor文件路径:
最后我们打开路径为:\public\ueditor下的ueditor.config.js文件,找到图中标记代码:
修改为下图标记位置所示:
来到项目更目录:利用npm安装ueditor模块:
重启服务,刷新页面,测试功能。
到此我们就完成了整个配置过程,如有疑问,请联系我,谢谢!!!
QQ:2412372691