CKEditor搭建&CKEditor接入阿里云oss上传图片

最新推荐文章于 2025-05-11 21:55:03 发布

鲁肃小生

最新推荐文章于 2025-05-11 21:55:03 发布

阅读量3.4k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： CKEditor CkEditor接入oss 富文本编辑器接入oss

本文链接：https://blog.csdn.net/u010004317/article/details/89513099

一. 前言

目前公司使用的富文本编辑器是百度的UEditor，目前其最新的版本停留在了16年的版本，基本算是无人维护的了，作为一个传统但是强劲的富文本编辑器，UEditor在初期的确是很多学生或者小型创业公司后台开发的首选富文本编辑器，但是随着业务的深入，UEditor的问题也暴露出来了。

- 代码结构复杂，无法很好地自定义和扩展（这个是很重要的原因，改起来真的很麻烦）
- bug多，不够稳定
- 样式太过老旧

富文本编辑器对于我们来说，要简单，够用就好了，太多花里胡哨的功能我们都不需要用到，参考过公众号和知乎的富文本编辑器，都是很简单的，虽然对对于我们做电商来说太过简单了，但是基本功能和样式就是我们想要的，我们完全可以在其基础上进行扩展。
另外个原因，我们的图片服务器是oss，所以需要通过富文本编辑器直传图片到oss中，直接在百度UEditor中，花了很大的力气接入了oss，虽然功能基本实现了，但是效果很不理想，无法所见即所得。
基于以上种种，我在市面上找了好几个编辑器，但是效果都不是很理想，接下来我列一下。

1. Editor.js

官网：https://editorjs.io/
简介：该编辑器是以块作为基本元素来的，每次编辑都是在一个块上进行编辑，主要的特点是，它的输出是json格式的，而不是传统的html格式，这是我非常喜欢的。可自定义插件，操作简单快捷。
建议：该编辑器适合业务不复杂的场景，以及只有pc端展示的场景，如写简单文章之类的，如果对于公司来说，需要从word编辑，需要提供移动端做html展示（对于ios和安卓来说，他们只能通过html来做渲染，无法引入该编辑器），该编辑器则无法实现

2. NKeditor

官网：https://gitee.com/blackfox/kindeditor
简介：基于 kindeditor 进行二次开发的项目，文档少，理解困难，这是产品找给我的
建议：不推荐用，没文档的开源就是坑，而且还是二次开发的。

在这里插入图片描述

3. wangEditor

官网：http://www.wangeditor.com/
简介：这款是我在网上发现很多人推崇的，github的star数也有7000多，算是比较活跃的一款开源编辑器，文档算是比较齐全，我刚开始也是觉得挺OK的，但是另外一个方面我觉得他的自定义插件功能不够强大，我的项目对自定义插件的要求很高，所以放弃
建议：对自定义插件功能要求不高的，我推荐这款编辑器

4. CKEditor

官网：https://ckeditor.com/ckeditor-4/ （CKEditor4地址）
https://ckeditor.com/ （CKEditor地址）
简介:CKEditor分CKEditor4和CKEditor5，因为CKEditor5要用到npm打包，并且其缺少了一些我觉得很重要的功能，所以我选择了CKEditor4，而且CKEditor5比较新，CKEditor4经历过了一段时间的考验。这也是在机缘巧合之下发现了这款编辑器，是国外开源的一款编辑器，拥有自己的详细的官网，而且官网做得还不错，github的社区也十分活跃，最近一次提交也是在一个月内，让我看到了他的可靠性，至少在未来两年内，该框架都会持续更新和优化，从长远来看，这都是其他编辑其所无法实现的。
他提供了多种编辑器样式供选择，而且文档很详细，老外写的文档，不得不说，真的很详细，虽然很长，像nginx，spring-boot的文档一样。而且文档中有各种demo，并且demo也提供了源码，给初学者提供了一个很好的入门机会。
建议：强烈推荐，只是是英文文档，读起来有点费力，不过技术英文文档估计是最简单的英文入门了，所用词汇相对简单，再结合词典就很容易理解了，不推荐把整个文档翻译成中文来看，先读英文文档，发现不懂的单词再去查词典，结合上下文理解他的语境。

在这里插入图片描述

二. 搭建基础的CKEditor框架

1. 基本配置

官网下载文件，下载界面可选：Basic Package、Standard Package、Full Package、Customize。根据自己需求下载不同的安装包，而且每种都有压缩版和源码版可选。其中Customize版本顾名思义可自定义选择自己需要的模块，官方也推荐使用这种方式自定义下载。Customize版本相当于在线上让你通过图形化界面自定义自己想要的插件和皮肤样式等，说实在，这个功能很强大。

1. 1 引入js

<script src="../install package/ckeditor/ckeditor.js"></script>

1.2 写一个textarea标签

  <textarea name="editor1" id="editor1" rows="10" cols="80">
        This is my textarea to be replaced with CKEditor.
    </textarea>

1.3 初始化CKEditor

CKEDITOR.replace('editor1', {
    uiColor: '#9AB8F3'
});

1.4 完整代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="../../install package/ckeditor/ckeditor.js"></script>

    <link href="simple-image.css" rel="stylesheet" />
</head>
<form action="" me