前言
在 Web 前端的开发中，富文本编辑器是一个非常常见的需求。而 CKEditor 便是一款功能强大且易于扩展的富文本编辑器。而在 CKEditor 5 中，@ckeditor/ckeditor5-utils 这个 npm 包提供了一些实用的工具函数，方便我们快速地扩展 CKEditor 5 的功能。本篇文章将向大家详细介绍如何使用该 npm 包。
安装
首先，我们需要在我们的项目中安装 @ckeditor/ckeditor5-utils 包。可以使用以下命令安装：
npm install --save @ckeditor/ckeditor5-utils
安装完成后，我们就可以在我们的项目中引入 @ckeditor/ckeditor5-utils：
import { on, off } from '@ckeditor/ckeditor5-utils';常用 API
on
on(target: EventTarget, eventName: string, listener: EventListener, options?: boolean | AddEventListenerOptions): Function
该函数用于向指定的事件目标添加事件监听器。例如，我们可以向一个 button 元素添加 click 事件监听器：
const button = document.querySelector('button');
const listener = () => {
console.log('clicked');
};
on(button, 'click', listener);当我们点击这个 button 元素时，会在控制台中输出 'clicked'。
该函数还可返回一个用于取消监听的函数，我们可以使用该函数取消事件的监听：
const removeListener = on(button, 'click', listener); removeListener();
这样，当我们再次点击该 button 元素时，就不会再有任何输出了。
off
off(target: EventTarget, eventName: string, listener: EventListener, options?: boolean | EventListenerOptions): void
该函数用于从指定的事件目标中移除事件监听器。例如，我们可以从一个 button 元素中移除 click 事件监听器：
-- -------------------- ---- ------- ----- ------ - --------------------------------- ----- -------- - -- -- - ----------------------- -- ---------- -------- ---------- -- - - --------- ------------- -- - ----------- -------- ---------- -- ------
这样，当我们点击该 button 元素后，会在控制台中输出 'clicked'，但在 3 秒后就不会再有任何输出了。
createUniqueId
createUniqueId(prefix?: string): string
该函数用于生成一个唯一的 id。例如，我们可以使用该函数为我们的元素生成一个唯一的 id：
import { createUniqueId } from '@ckeditor/ckeditor5-utils';
const element = document.createElement('div');
// 生成唯一的 id，并将其设置为元素的 id
element.id = createUniqueId('my-prefix-');getDataFromElement
getDataFromElement(element: Element, dataAttributeName: string): string | null
该函数用于从指定的元素中读取指定的 data 属性，并返回属性对应的值。例如，我们可以从一个包含 data-id 属性的元素中读取 id 的值：
<div data-id="123">...</div>
import { getDataFromElement } from '@ckeditor/ckeditor5-utils';
const element = document.querySelector('div');
// 获取元素的 id
const id = getDataFromElement(element, 'id');
console.log(id);控制台会输出 '123'。
setDataOnElement
setDataOnElement(element: Element, dataAttributeName: string, dataAttributeValue: string): void
该函数用于向指定的元素中设置指定的 data 属性，并将属性的值设置为指定的值。例如，我们可以向一个 div 元素设置 id：
import { setDataOnElement } from '@ckeditor/ckeditor5-utils';
const element = document.createElement('div');
// 向元素中设置 id
setDataOnElement(element, 'id', '123');示例代码
以下是一个使用 @ckeditor/ckeditor5-utils 包的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- --------------- --
-------------------------------- ----------
-------
------
---- ------------- ----------------------
-------------------
------- --------------------------
-------
--------- -------------------- ---- ------- ------ - --- ---- --------------- ------------------- ---------------- - ---- ---------------------------- ----- ------ - --------------------------------- ----- ------- - ------------------------------ ----- -------- - -- -- - -------------------- ------- ---- -- ----------------------------- --------- -- ---------- -------- ---------- -- - - --------- ------------- -- - ----------- -------- ---------- -- ------ ----- -------- - ----------------------------- ------------------------- ----- ----------
总结
通过本文的介绍，我们学习了如何使用 @ckeditor/ckeditor5-utils 包提供的一些工具函数。这些函数可以帮助我们更加方便地扩展 CKEditor 5 的功能。希望本文对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedabc0b5cbfe1ea061083b