koa2.0富文本编辑器的选择历程
本人学习vue和koa2.0,做了一个简单的个人博客,博客自然会需要富文本编辑器的选择,由于nodejs和koa2.0,于是便开始了不断尝试的历程。
一、ueditor
刚开始在百度搜索,自然第一个发现就是百度的ueditor,哇,功能好强大,虽然样式抽了些,于是便兴高采烈的学习百度的ueditor的使用,学者学者就发现一个事实,百度的uediotr不支持nodejs后台,于是果断放弃,重新开始了寻找历程,很快发现了koa-ueditor
二、koa-ueditor
地址在这里:https://github.com/weivea/koa-ueditor
1. 上传图片按钮为灰色
koa-ueditor是以百度的ueditor为基础,使其部分功能可以支持nodejs,而且是koa,于是按照其说明,做起了代码搬运工,一系列部署后,编辑器正常显示出来了,咦。。。,上传图片按钮是灰的,无法上传图片。。。,控制台一看发现一直报错,刚开始以为是自己的用法不对,于是各种尝试,寻找室友帮助,结果还是大败而归,当时完全按照该例子的用法写的啊,可就是上传图片功能不好使=。=
后来冷静下来后,开始研究在node_modules中的koa-ueditor模块,发现其中只有一个index.js,然后便是在百度ueditor中的文件夹中多了个nodejs文件夹,里面是一个配置文件,大概看了一眼index.js代码后,知道了其主要是起路由和上传文件的作用,如果请求(GET)的参数中的action是config的话,便重定向,返回nodejs文件夹下的配置文件,然后我在其中打印调试,发现该代码并没有执行,于是得出结论,是该路由不好使,最后得到一个猜测,那就是该中间件使用的是koa1.0的generator函数,而我使用的是koa2.0,而koa2.0是用的async/await,于是把那个index.js文件函数改变为koa2.0的async和await后,如果好使了,上传图片按钮不是灰的了,哈哈,终于搞好了,我真是聪明。
2. 上传图片按钮彩色,但是上传不上去
在尝试上传图片时,发现还是上传不上去,只不过错误变成了请求失败。。。,于是觉得可能还是koa版本问题,于是开始研究图片上传代码,发现其中使用了co-busboy对multipart/form-data格式文件解析,然后使用fs的流操作对文件存储,然后返回浏览器对应的url,最后对co-busboy一系列调试打印,发现奈何不了他,于是尝试更换其他工具来对文件解析,还真发现了一个await-busboy,然而还是并不好使,一天的各种尝试后,放弃了,最终决定放弃使用koa-ueditor,尝试使用小伙伴使用的vue-quill-editor,代码搬运后,发现没什么问题,而且界面好看,但是最后发现上传的图片时base64的,。。。,需要将base64自己进行处理,但是对这方面真是不太熟悉,于是有转向了之前的koa-ueditor,但是不再使用该中间件,因为该中间件其实就是在另一个php版本的uediotr上增加了一个nodejs路由,完全可以自己实现啊。
三、改造ueditor
1. 路由使用vue-router完全ok,问题在于文件的解析和保存,解析后的结果需要是readStram才能存储,经过一些测试选择后,选择了busboy中间件https://github.com/mscdex/busboy,改造后,上传图片ok,但是上传单张图片的右边还有个图片管理,在图片管理中上传一张或者多张图片会报错,猜测可能是请求和请求处理不搭配吧,然后想用koa-multer替代,但是使用koa-multer无法对config进行if判断,最后放弃,放弃了多张图片上传的功能。
四、学习与反思
过程这么艰辛,一小方面是因为koa2.0版本的问题,另一大方面是自己对这方面的只是了解太少,很多东西都只是停留在使用层面,对应的理论原理一知半解,以后要注意原理这方面的积累,所谓技术都是大同小异,具有相似点的。
个人博客学习demo:https://github.com/My-Walker/my-blog
----------------------end
koa2.0富文本编辑器的选择历程的更多相关文章
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- 在Asp.Net或.Net Core中配置使用MarkDown富文本编辑器有开源模板代码(代码是.net core3.0版本)
研究如何使用Markdown你们可能要花好几天才能搞定,但是看我的文章或者下载了源码,你搞定一般在10分钟之内.我先给各位介绍下它: Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯 ...
- 轻量级富文本编辑器wangEditor源码结构介绍
1. 引言 wangEditor——一款轻量级html富文本编辑器(开源软件) 网站:http://www.wangeditor.com/ demo演示:http://www.wangeditor.c ...
- 重构wangEditor(web富文本编辑器),欢迎指正!
提示:最新版wangEditor请参见:wangEditor.github.io 或者 https://github.com/wangfupeng1988/wangEditor 1. 前言 (下载源码 ...
- 百度Web富文本编辑器ueditor在ASP.NET MVC3项目中的使用说明
====================================================================== [百度Web富文本编辑器ueditor在ASP.NET M ...
- 百度富文本编辑器UEditor安装配置全过程
网站开发时富文本编辑器是必不可少的,他可以让用户自行编辑内容的样式然后上传到后台!下面我们来介绍如何安装使用百度富文本编辑器 一.下载并且设置百度富文本编辑器的样式 你可以去百度UEditor ...
- JavaScript Iframe富文本编辑器中的光标定位
最近在项目中碰到一个比较棘手的问题: 在iframe富文本编辑器中,有个工具栏,这个工具栏在iframe标签之外,工具栏上有一个按钮,点击该按钮向iframe正在编辑中的光标处插入一个图片,图片会插入 ...
- 百度富文本编辑器ueditor使用总结
最近做的项目用到了ueditor这个东东,但是他的一些配置文档对初次使用者来说很难以理解,故作此总结 相关详细操作链接地址: http://blog.csdn.net/wusuopubupt/arti ...
- springMVC -- 整合UEditor(富文本编辑器)
工作中需要用到UEditor编辑文本,在与springMVC进行整合时,出现了一些问题,结果导致,在进行图片上传时出现如下提示: 上网查询了很多相关资料,此处简要记录下,防止以后遇到类似问题. 一种方 ...
随机推荐
- curl使用例子
地址:http://phpbook.phpxy.com/34771 参考:http://php.net/manual/zh/function.curl-setopt.php 我们将curl的步骤分为以 ...
- asscert断言的几种方法
一.什么是断言 执行完测试用例后,最后一步是判断测试结果是通过还是失败,在自动化脚本中一般把这种生成测试结果的方法叫做断言 它用来检查一个条件,如果它为真,则不做任何事,如果它为假,则会跑出Asser ...
- Docker入门与应用系列(五)Dockerfile
Dockerfile是为快速构建docker image而设计的,当你使用dockerbuild 命令的时候,docker 会读取当前目录下的命名为Dockerfile(首字母大写)的纯文本文件并执行 ...
- Android 电源管理 -- wakelock机制
转载地址:http://blog.csdn.net/wh_19910525/article/details/8287202 Wake Lock是一种锁的机制, 只要有人拿着这个锁,系统就无法进入休眠, ...
- 【BZOJ4384】[POI2015]Trzy wieże 树状数组
[BZOJ4384][POI2015]Trzy wieże Description 给定一个长度为n的仅包含'B'.'C'.'S'三种字符的字符串,请找到最长的一段连续子串,使得这一段要么只有一种字符 ...
- 【BZOJ4259】残缺的字符串 FFT
[BZOJ4259]残缺的字符串 Description 很久很久以前,在你刚刚学习字符串匹配的时候,有两个仅包含小写字母的字符串A和B,其中A串长度为m,B串长度为n.可当你现在再次碰到这两个串时, ...
- 【BZOJ1367】[Baltic2004]sequence 左偏树
[BZOJ1367][Baltic2004]sequence Description Input Output 一个整数R Sample Input 7 9 4 8 20 14 15 18 Sampl ...
- ITMS-SERVICES://方式安装IPA在IOS 7.1中的变化
转:https://laoyur.com/?p=414 iOS7.1中,通过itms-services://方式安装ipa已经发生了改变,.plist文件必须是https://的,.ipa文件的链接则 ...
- js实现查询关键词,使其高亮
今天做了一个功能:在页面上查询关键,使其高亮显示,实现代码如下: css: <style type="text/css"> .highlight { backgroun ...
- 使用maven搭建SSM框架
使用maven搭建SSM框架,首先得准备好maven环境. 搭建maven环境 第一步:下载maven http://maven.apache.org/download.cgi 下载后解压就可以了. ...