在前端开发中，使用富文本编辑器已经成为了不可避免的需求。而 ckeditor 是一个优秀的富文本编辑器，可以进行高度定制化，实现各种功能，同时支持多语言。本文将介绍如何使用 npm 包 ckeditor-light-theme，创建一个简洁美观的富文本编辑器。
安装 Ckeditor-light-theme
通过 npm 包管理器，我们可以很方便地安装 ckeditor-light-theme：
npm install ckeditor-light-theme
配置 ckeditor
在使用 ckeditor-light-theme 之前，需要先安装 ckeditor，安装方法如下：
npm install ckeditor在 HTML 文件中引入 ckeditor：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- --------------- ------- ------------------------------------------------- ------- ------ --------- -------------- ------------------------ -------- ----------------- --------- -- --------- ------- -------展开代码
现在启动 HTML 页面，可以看到富文本编辑器已经成功地被加载。
接着，我们需要引入 ckeditor-light-theme 主题：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- --------------- --------------- ------- ------------------------------------------------- ------- ------------------------------------------------------------------------- ------- ------ --------- -------------- ------------------------ -------- ----------------- ---------- - ----- ------- - -- --------- ------- -------展开代码
现在，启动页面将如下图所示：
优化图片上传
在默认配置下，ckeditor 无法上传图片。我们可以通过配置图片上传功能，让 ckeditor 成为完善的富文本编辑器。
首先在 HTML 文件中添加以下代码，表示要使用 ckeditor 提供的图片上传功能：
<script src="node_modules/ckeditor/adapters/jquery.js"></script> <script src="node_modules/ckeditor/plugins/image/plugin.js"></script>
接着，在 ckeditor 的配置中添加图片上传配置：
<script> CKEDITOR.replace('editor1', { extraPlugins: 'image', uploadUrl: '/upload-image', filebrowserUploadUrl: '/upload-image', filebrowserUploadMethod: 'form' }); </script>
以上代码中，uploadUrl 表示上传的图片将会被发送到该 URL，filebrowserUploadUrl 与 filebrowserUploadMethod 表示当插入图片时，上传插件将会使用指定的 URL 和方法发送 HTTP 请求。
此时，我们需要使用后端框架的相关技术，实现 /upload-image 对应的后端接口，来处理上传图片的功能。
总结
到这里，我们已经成功地配置了 ckeditor，实现了一个简洁美观的富文本编辑器。在实现这个过程中，我们掌握了 ckeditor 的基本用法，以及如何增强 ckeditor 的功能，让其变得更加完善和实用。同时，我们也了解了如何使用 npm 包管理器，以及如何配合后端框架实现 ckeditor 的图片上传功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066b5751ab1864dac66d0a
