前言
在前端开发的日常工作中，常常需要使用富文本编辑器来编辑文章、动态等，以满足用户需求，提高用户体验。在富文本编辑器的众多选择中，CKEditor 是一款知名的富文本编辑器，它支持自定义配置、多语言等特性，广受开发者喜爱。
然而，在实际使用的过程中，开发者们也面临着各种挑战，如富文本编辑器的初始化、文本格式转换等问题。本文将介绍 npm 包 ckeditor5-build-classic-markdown 的用法，帮助开发者快速搭建使用 CKEditor5 进行富文本编辑的环境，并以 Markdown 格式保存数据，方便后续的文本处理。
环境准备
需要自行安装Node.js和npm，以及开发所需的IDE。
安装 CKEditor5-build-classic-markdown
在终端中输入以下命令：
npm install @ckeditor/ckeditor5-build-classic-markdown
引入 CKEditor5
在 HTML 文件中引入 CKEditor5：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ---------------- ------------ ------- ------------------------------------------------------------------------------------------- ---- ------- --- ----- ----------------------------------------------------------------------------------- ---------------- ---------------- ------- ------ ------------- --------- ---- ------------------ ------- -------
使用 CKEditor5 进行富文本编辑
为了让 CKEditor5 能够在页面中渲染，需要进行以下的配置，将编辑器所需的模块加载到编辑器中：
-- -------------------- ---- -------
--------- ---------------------
----- ------------- - ----------------------------------
-------------
---------------------- -
-------- - ------- --------- ------- --------------- --------------- ------------ --
--------- --------
------------- -
---------- -- ---------
--
--------- -
---------- -- ---------
-
--
------------ -- -
----------------------- ---------------------------------- - -- -- -------
--
------------ -- -
-------------------- ------------ --- ---------- -- -------
---通过 create 方法，在 editorElement 中创建一个富文本编辑器。toolbar 属性指定使用的工具条组件。language 属性指定语言。simpleUpload 属性和 ckfinder 属性指定上传文件的地址等信息。
我们需要添加以下代码，让编辑器所需的 CSS 样式和 JS 文件被加载。
-- -------------------- ---- ------- ----------- ----- ----------------------------------------------------------------------------------- ---------------- ---------------- ------------------ ----- --------------------------------------------------------------------------------------------- ---------------- ---------------- ------------------------------------- ------- ------------------------------------------------------------------------------------------- -------------- ------- ------------------------------------------------------------------- -------------- ------- ---------------------------------------------------------------------------------- --------- ------- --------------------------------------------------------------------------- --------- ------- ----------------------------------------------------------------------------- ---------- ------- ------------------------------------------------------------------------------------ ---------- ------- -------------------------------------------------------------------------------- --------- ------- ------------------------------------------------------------------- ----------- ------- ------------------------------------------------------------------- --------- ------- -------------------------------------------------------------------------------- ----------- ------- --------------------------------------------------------------------------------------------- ----------- ------- ----------------------------------------------------------------------- ----------- ------- --------------------------------------------------------------------- ------------ ------- -------------------------------------------------------------------------------- ----------- ------- ------------------------------------------------------------------------------ ------------ ------- ----------------------------------------------------------------------------------------
Markdown 保存
在文本编辑器中，我们并不想使用过多的带格式字符串或者 html 标签来保存数据，因为这样不利于数据的处理。我们希望能够使用常见的 Markdown 格式来保存数据，并将其转换为 html 格式以供后续阅读。市面上已有相关的开源库，如 turndown，但是使用起来相对麻烦，需要引入较多的依赖，增加了项目的复杂度。
CKEditor5 提供了一个 plugin，叫作 markdown，它能够将编辑器中的富文本内容转化为 Markdown 格式的字符串。我们可以将该字符串与后端交互，并保存起来。在页面展示时，我们可以根据需要将该 Markdown 字符串转化为 HTML 格式的内容展示。使用方法如下：
editor.getData('markdown');上述方法将返回以 Markdown 格式表示的文章内容。需要引入 @ckeditor/ckeditor5-markdown-gfm 包，使用如下：
-- -------------------- ---- -------
------ -------- ---- ------------------------------------------------
-------------
-------- -------------- -
-- -
-------- - --------- - --
- -
------ - -
------- - --Ckeditor5-build-classic-markdown 中包括所需的所有内容，则使用时无需单独安装。
小结
使用 CKEditor5 进行富文本编辑涉及到的细节非常多，需要注意配置、依赖等问题。本文介绍了 CKEditor5 的 npm 包 ckeditor5-build-classic-markdown 的基本用法，使得开发者可以快速搭建一个基于 Markdown 格式保存的富文本编辑器环境。希望本文能够对前端开发者在中使用 CKEditor5 进行日常开发提供一些帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663c81e8991b448e2400