2018-08-31——关于nodejs如何使用UEditor

一、关于UEditor


       首先得向大家介绍一下UEditor,由于我也是第一次使用,对他也不是特表了解,在此我就引用百度百科的一段话:UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器,具有轻量、可定制、用户体验优秀等特点。开源基于BSD协议,所有源代码在协议允许范围内可自由修改和使用。百度UEditor的推出,可以帮助不少网站开发者在开发富文本编辑器所遇到的难题,节约开发者因开发富文本编辑器所需要的大量时间,有效降低了企业的开发成本(以上内容,来自于百度百科)。

       说了一大堆,简单来说,就是由百度WEB前端研发部开发的富文本编辑器,可以引用到web页面使用,开源免费,允许二次开发,其功能就像Word,能够对大量文字进行排版,有所不同的是,排版格式能够和HTML以及css兼容,是很多后台文章编辑的首选工具插件。


Ueditor界面

二、UEditor的下载


    介绍说完了,我们就得来看看UEditor的下载了,官方网站:http://ueditor.baidu.com/website/额。。。关于如何下载,我想不需要我多说了,如果这都不会的话,我还是劝你转行吧。。。有一点需要说明的是,由于UEditor官方并不支持nodejs,目前只支持PHP、ASP、JSP三种,我们就先下载PHP版本的,后期对他进行修改和配置,使他支持nodejs。


三、创建nodejs+express项目


在这里我就不去手动创建项目框架了,直接使用webstrom创建一个名为test的项目。建好的项目结构如下:


test项目结构

四、引用UEditor

关于项目结构我就不多说了,直接开始引用UEditor,首先将我们下载好的PHP版本的UEditor解压,如果不出问题的话,应该如下图:


第一步、我们需要做的是在public文件夹下新建一个名为ueditor的文件夹,并将解压的UEditor的所有文件拷贝到ueditor之下,如下图:


拷贝UEditor之后的项目结构

第二步、将ueditor文件夹下的PHP文件夹名称修改为nodejs。修改之后如下图:


修改之后的项目结构

第三步、在页面当中引用UEditor,来到views文件夹下的index.ejs,首先在head标签当中应用UEditor的js文件,代码:

js文件引用

然后在需要使用UEditor的地方写上:

引用UEditor代码

不知道为什么简书没法张贴代码,我就已截图形式上传,写完这行代码,最后在js里面是实例化:最终代码如下:


页面完整代码

这个时候,我们启动项目,在浏览器输入http://localhost:3000/,进入首页,查看效果如图:


完整界面

五、后台配置


现在的UEditor表面上看起来没什么问题,当我们打开F12审查元素就会发现程序报错,这是由于UEditor会自动检测后台配置,如果后台配置有问题,上传功能将无法使用,接下来就开始后台配置。

首先在app.js里面输入如下代码:



后台配置代码

需要注意的是标记位置:第一个标记相信大家都能看到,设置静态资源路径,第二个主要是设置图片保存位置,我们设置的是/images/ueditor/,所以我们需要在public下的images文件夹里面新建一个ueditor文件路径:


完整项目结构

最后我们打开路径为:\public\ueditor下的ueditor.config.js文件,找到图中标记代码:


修改前

修改为下图标记位置所示:


修改后

来到项目更目录:利用npm安装ueditor模块:


npm安装模块

重启服务,刷新页面,测试功能。


最终效果

到此我们就完成了整个配置过程,如有疑问,请联系我,谢谢!!!


QQ:2412372691

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容