React使用CKEditor全网最详细讲解(一)

在写这个博客的时候，我遇到了好多问题，编辑器的使用就是一个很大的坑，我使用了百度的UEditor、wangEditor、CKEditor4、CKEditor5，最后选择了CKEditor5，在这篇文章中，我会详细地对比各个Editor使用地一些区别，接下来地几篇文章会重点讲解React使用CKEditor5的详细使用，包括简单使用，高级使用，图片上传等。

在刚开始的时候，我是使用wangEditor，它的功能很好，基本可以满足使用，但是，有一个问题，就是代码的编辑以及高亮显示没有支持，百度听说UEditor对这方面有比较好的支持，于是，我便对UEditor进行了一个详细的研究，发现其真的可以对代码进行编辑，并且高亮显示，于是便试着使用UEditor，但是发现有一点困难我克服不了，那就是，图片的上传接口是通过返回的参数来实现的，我试着通过增添接口来适应返回来适应UEditor，但是发现报了很多错误，这个编辑器已经很久没有更新了，不打算花过多的时间在上面。于是便重新选择了另外一个编辑器CKEditor4。

CKEditor4是基于html的编辑器，你可以在线选择插件进行编译器的下载，然后再导入项目中就可以了，下载地址为：https://ckeditor.com/cke4/builder，如图所示：

在选择编辑器的外观，插件，主题后，就可以下载编辑器，在项目中通过< script>脚本的方式来引用，但是，这个编辑器是基于HTML的，满足不了我的要求，于是便选择了CKEditor5

CKEditor5是基于Nodejs的编译器，很好地支持了React等主流的Nodejs框架，它把菜单的每一项功能都进行了拆分，通过插件的方式来引入，最后配置好的编译器如下：

这个编辑器与wangEditor不同的是，多了一个代码插入的功能，这正是我想要的功能，但目前开发不久，暂时还没有代码高亮功能显示，我会在后续的版本中继续更进。

在下一篇文章，我会讲解到React使用CKeditor5的使用