以ckeditor5为例记录npm的使用

想要自己搭建一个博客，同时又不想使用现成的那种，而是希望把自己学过的东西应用起来，毕竟自己前后端一锅炖了有段时间了。

但是既不想完全现成的，又不想造轮子，所以该用的工具还是要用的。我打算的是使用sqringmvc+mybatis，前端使用ajax的技术，大致定位是这样，因为我还是个菜鸟。

那么首先有一点文档编辑使用富文本编辑器很重要，再了解了一堆的富文本编辑器之后，入了ckeditor5这个坑，一开始还看了ckfinder,感觉高端。后面发现巨坑！为了填平这个巨坑，我可是费了力气了。因为ckeditor5本身他是可定制的，但是从官方下载的ckeditor5的classicEditor本身的功能很有限，虽然富文本编辑器的图片上传都要自己写，但是ckeditor5用了比较新的技术包括npm的webpack,ES6的promise，而且中文资料和博客相对较少，所以费了很大的劲，最终是使用了官方的方式才给调通的，但是目前依然还有很多问题。

我最重视从Git克隆到本地的这个版本https://github.com/ckeditor/ckeditor5-build-classic

但是按照这个最基础的版本，插入图片只能使用连接的方式，这点肯定是不行的，肯定是要用户可以直接上传本地的图片的。

所以，为了这个需求，我找了很多文章，同时也了解了这些文章里提到的一些技术webpack,

最开始搜索到这两篇，富文本编辑器CKEditor 5的使用,CKEditor5基本使用，百度首页的，emmm，算是了解了但是一头雾水

至少知道了要安装npm，使用webpack，到此就好了，这里的再看反而是误导自己了

[CKEditor 5] 套件打包方式,这篇文章里我看了个大概才算明白是怎么回事。知道要怎么用webpack来进行定制化了，但是关于图片上传的问题依旧没法解决，后来又看到了下面这篇，

CKeditor 编辑器使用记录 （CKeditor 4 and 5 ），在这篇文章影响之后，我才去看了ckeditor5的官网关于图片上传的教程，如下

Custom image upload adapter，再看不懂的情况下使用谷歌浏览器右键翻译成中文的功能。。。

最后终于与springMVC和ajax配合，完成了上传图片到服务器，最后，又根据网上教程，改为上传至七牛云，其中还涉及数据是base64还是blob等一系列问题，最后成功了当然不是上个里面那么复杂，只是最简单的上传。

html页面上传图片到七牛云。javaweb上传图片到七牛云

java 七牛云简单上传文件以及返回url

在这之后，又涉及到关于ckeditor5的富文本文档的存储，如何上传至后台使用ajax上传，因为ckeditor5获取文档内容似乎无法直接使用form表单提交，需要自己写ajax提交，这里面又有一堆的坑！

后台存储格式我使用了blob，以及如何从数据库将blob读取成字符串。读取之后怎么样在前端展示还原出文档的格式。这里又需要对数据格式进行调整，又是一堆反人类的操作。

完成这部分之后，又涉及到需要展示文档的列表，我当然不能就用一个table来展示自然也不会使用类似JQgrid之类的，目标是类似简书的那种呈现方式，那么这样又遇到了前端的问题。该怎么把数据展示出来。

这里我先解决的是分页，关于分页，前端，后端分页，这又是一堆问题，没有处理过得。我再了解了一番之后，决定后端先用mybatis配合pageHelper插件后台用spring先进行好分页。

关于pageHelper，最后还是使用了Git上的方式进行了配置，网上的博客，一般不会告诉你版本。

你会发现一堆问题，最主要的就是每个版本其配置方式是不一样的！这个时候去Git主页或者官网是最合适的。

在完成了后端分页之后，前端使用了一篇博客里写的分页方式，费了一番周折好在折腾出来了https://www.cnblogs.com/weitaming/p/7605249.html，当然前后端要进行配合，我用了springMVC的@requestParamer。

这样分页先一步完成，数据展示成为下一步必须要解决的。

首先我们要展示一篇文章的简要信息，包括用户头像，文章摘要，文章中一副图片的缩略图，发表时间，点赞，浏览数等等。先做出一个大概的样式出来，然后，本来是想着使用ajax获取json数据然后展示在里面。但是我又想直接让页面去渲染数据，不用ajax去拼接字符串，显然我是受到了jsp的jstl的影响了，似乎我用ajax去拼接字符串然后去刷新页面然我感觉比用原生jsp的jstl更加反人类，当然还是modelAndView这种，然后我发现了所谓的模板引擎，然后我又去了解了常见的几种模板引擎，我感觉Handlerbar.js https://www.jianshu.com/p/cf84d7ef21e6,这个里面就是最简洁的了，关于Handlerbar.js ，网上说的一些jar包和spring里配置视图解析器其实不需要（涉及更深层次才需要，至少我们的需求不需要）。

不过我们需要Handlebars.registerHelper来帮助我们做一些数据的预处理，相当于给模板引擎之中加入了js方法。如下

https://www.jianshu.com/p/cf84d7ef21e6

这一部分我们涉及到了从ckeditor5的富文本文档数据中利用正则提取出第一幅图片和提取摘要。

关于提取摘要这部分，有一点是需要注意的，就是ckeditor5的块引用里面如果有html代码，并且在提取摘要时被提取了出来，这种情况下直接使用去掉标签的方式得到的是很不美观的，会显示出一些特殊字符。正确的做法是过滤掉块引用部分然后去掉标签

var ret = content.replace(//g, '');
 var re1_htm = new RegExp("<.+?>","g");

还有一点细节在于html的处理如果用上面那个链接中的方式，样式会有些不太多。使用dom.empty()然后直接dom.append(html);的方式则很简单，不容易出错。

经过以上一些列的操作，已经可以完成从发帖到浏览到点击展示的部分了。