介绍
@ckeditor/ckeditor5-editor-decoupled 是一款基于 CKEditor 5 构建的富文本编辑器，具有高度可定制化的特点。它的最大优点是将编辑器的外观和行为分离，使用户可以自由地使用自定义的外观在编辑器中为自己的网站或应用程序创建内容。
在这篇文章中，我将会分享如何使用 @ckeditor/ckeditor5-editor-decoupled 包，并讲解如何根据自己的需求来自定义该编辑器。
安装
首先，要安装 @ckeditor/ckeditor5-editor-decoupled 包，需要运行以下命令：
npm install --save @ckeditor/ckeditor5-editor-decoupled
然后，在你的项目中，你需要引用编辑器模块以及它的样式文件。可以将下面两行代码添加到你的 JavaScript 文件中：
import DecoupledEditor from '@ckeditor/ckeditor5-editor-decoupled/src/decouplededitor'; import '@ckeditor/ckeditor5-editor-decoupled/theme/decoupled.css';
使用
接下来，你需要将编辑器添加到你的网页中。可以在你的 HTML 页面中添加下面的代码：
<div id="editor"></div>
然后在你的 JavaScript 文件中，你需要使用 document.querySelector 来选择你的 div 元素，然后将其传递给编辑器实例进行初始化。
DecoupledEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
console.log( editor );
} )
.catch( error => {
console.error( error );
} );这将会创建一个新的编辑器实例，并将其添加到网页中的 div 元素中。
自定义
@ckeditor/ckeditor5-editor-decoupled 支持高度可定制化，可以通过以下步骤对编辑器进行自定义：
添加插件
CKEditor 5 带有许多插件，可以使编辑器可以创建更丰富的内容。你可以使用以下命令安装它们：
npm install --save @ckeditor/ckeditor5-essentials @ckeditor/ckeditor5-basic-styles @ckeditor/ckeditor5-paragraph @ckeditor/ckeditor5-image
然后，在你的 JavaScript 文件中，你需要将这些插件导入到代码中：
import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'; import ParagraphPlugin from '@ckeditor/ckeditor5-paragraph/src/paragraph'; import BoldPlugin from '@ckeditor/ckeditor5-basic-styles/src/bold'; import ItalicPlugin from '@ckeditor/ckeditor5-basic-styles/src/italic'; import ImagePlugin from '@ckeditor/ckeditor5-image/src/image';
接下来，修改以下代码进行插件的注册：
-- -------------------- ---- -------
---------------
-------- ----------------------- --------- -- -
-------- -
-----------------
----------------
-----------
-------------
-----------
--
-------- - ------- --------- ------- -
- -
------ ------ -- -
------------ ------ --
- -
------- ----- -- -
-------------- ----- --
- --这段代码将会加载 Essential、Paragraph、Bold、Italic 和 Image 插件，并在工具栏中只添加三个按钮：Bold、Italic 和 Image。
修改外观
作为一个分离式编辑器，@ckeditor/ckeditor5-editor-decoupled 允许您更改其外观。你可以使用以下命令安装它们：
npm install --save @ckeditor/ckeditor5-dev-utils @ckeditor/ckeditor5-theme-lark
然后，在你的 JavaScript 文件中，你需要将这些插件导入到代码中：
import DevUtilsPlugin from '@ckeditor/ckeditor5-dev-utils/src/devutils'; import LarkTheme from '@ckeditor/ckeditor5-theme-lark/src/larktheme.css';
接下来，为你的编辑器提供要使用的主题：
-- -------------------- ---- -------
---------------
-------- ----------------------- --------- -- -
-------- -
-----------------
----------------
-----------
-------------
------------
--------------
--
-------- - ------- --------- ------- --
------ ------
- -
------ ------ -- -
------------ ------ --
- -
------- ----- -- -
-------------- ----- --
- --这段代码将主题设置为 lark 并使用了 DevUtilsPlugin 插件来调试编辑器。
示例代码
下面是一个完整的示例代码，展示了如何使用 @ckeditor/ckeditor5-editor-decoupled 包并自定义其插件和主题。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
----- --------------- ---------------------------- -----------------
--------------- - --------- ---------------
-------
------
---- ------------------
---- ---- ----------- ------ ---
------- -------------------------
-------
--------- -------------------- ---- -------
------ --------------- ---- -----------------------------------------------------------
------ -----------------------------------------------------------
------ ---------------- ---- ------------------------------------------------
------ --------------- ---- ----------------------------------------------
------ ---------- ---- --------------------------------------------
------ ------------ ---- ----------------------------------------------
------ ----------- ---- --------------------------------------
------ -------------- ---- ---------------------------------------------
------ --------- ---- ---------------------------------------------------
---------------
-------- ----------------------- --------- -- -
-------- -
-----------------
----------------
-----------
-------------
------------
--------------
--
-------- - ------- --------- ------- --
------ ------
- -
------ ------ -- -
------------ ------ --
- -
------- ----- -- -
-------------- ----- --
- --结论
通过使用 @ckeditor/ckeditor5-editor-decoupled 包，我们可以在我们的网站或应用程序中创建高度可定制化的富文本编辑器。无论是使用哪种插件，还是修改外观，我们都可以创建适合我们特定需求的编辑器。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f69584ba9b7065299ccb7ea