在当今网页应用程序中，富文本编辑器是一种十分常见的功能需求。市面上已经有很多开源的富文本编辑器，如 TinyMCE、Froala Editor、Quill 等，但这些编辑器的代码复杂度较高，而且在定制化方面存在一定的困难，难以满足特定需求。本文将介绍如何使用 Web 标准 Custom Elements API 来创建一个简单的富文本编辑器，以满足基础的需求，并方便对其进行客制化。
Custom Elements 简介
Custom Elements API 是 Web 标准的一部分，用于创建自定义的 HTML 元素，这也是 Web 组件的核心技术之一。通过 Custom Elements API，我们可以创建一组具有特定行为和特定样式的 HTML 元素，并将其封装成一个自定义元素，这样在应用程序中就可以直接使用这个自定义元素了。
Custom Elements API 简单易学，也有较好的浏览器支持，因此很适合用来快速开发小型 Web 组件。
基础结构
下面是一个最基础的富文本编辑器的 HTML 结构：
<div contenteditable></div>
这个结构中的 contenteditable 属性可以让元素成为一个可以编辑的区域。我们需要对这个结构进行增强，以满足以下需求：
- 给元素添加一些样式，让它看起来更像一个富文本编辑器；
- 添加一些工具栏，让用户能够对编辑器内容进行格式化。
Custom Elements 实现
首先，我们来创建一个名为 wysiwyg-editor 的 Custom Element：
-- -------------------- ---- ------- ----- ------------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - -- ---- -- -- ------------------------------ ----- --------- - ------------------------------ ------------------------- - ----- ---------------------------------- - - --------------------------------------- ---------------展开代码
在 WysiwygEditor 构造函数中，我们首先通过 attachShadow 方法创建了一个 Shadow DOM，这样我们可以在内部和外部样式独立开来。然后使用 document.createElement 方法创建了一个 <div> 元素并将 contentEditable 属性设置为 true，从而使得它可以编辑文本。最后，将创建出来的元素添加到 Shadow DOM 中。
接下来，我们可以添加一些样式，使编辑器看起来更像一个富文本编辑器：
-- -------------------- ---- ------- ----- - -------- ------ ------- --- ----- ----- -------------- ---- -------- ----- - -------------------- - ----------- ------ ------- ----- -------- ----- ---------- ----- ------------ ---- -展开代码
这样，我们就能够得到一个基础的富文本编辑器了。
接下来，我们需要添加一些工具栏，并使其可以对编辑器内容进行格式化。
工具栏的实现
下面是一个最基础的工具栏的 HTML 结构：
<div class="toolbar"> <button class="bold">加粗</button> <button class="italic">斜体</button> <button class="underline">下划线</button> </div>
这个结构中包含了三个按钮，用于实现文本加粗、斜体和下划线格式。
-- -------------------- ---- ------- ----- ------------- ------- ----------- - ------------- - -------- ----- ---------- - ------------------- ----- ------ --- ----- ----- - -------------------------------- ----------------- - - -- ---- -- -------- - -------------- ----- - -------- ------ - ------------- ----- ----------- ----- ------- ----- ------- -------- - -- ------------------------------ ----- ------- - ------------------------------ --------------------------------- ----------------- - - ------- ------------------------ ------- -------------------------- ------- ------------------------------ -- -------------------------------- ----- --------- - ------------------------------ ------------------------- - ----- ----------------------------------- ----------------------------- ---------------------------------- - ------------- - ----- ------- - --------------------------------------- ----- --------- - ----------------------------------------- ----- ------------ - -------------------------------------------- ---------------------------- ------ ----- - ------------------------------- - ----------------------------------- ------------------------------ ------ ----- - --------------------------------- - ------------------------------------- --------------------------------- ------ ----- - ------------------------------------ - ---------------------------------------- - - --------------------------------------- ---------------展开代码
在 WysiwygEditor 构造函数中，我们创建了一个工具栏，包含了三个按钮，分别对应文本加粗、斜体和下划线格式。对于每个按钮，我们给它添加了一个 click 事件监听器，在点击时将执行对应的操作。
在 handleInput 方法中，我们针对当前鼠标焦点所在处的样式进行了检测，并将工具栏按钮的状态进行了更改。在检测当前样式时，我们使用了 document.execCommand 方法。该方法是一个废弃方法，但在浏览器中仍然有着很好的兼容性，并且可以实现基础的富文本编辑器功能，因此在本文中使用它来实现文本格式化功能。
至此，我们就得到了一个包含工具栏和编辑区域的简单富文本编辑器。
客制化
在实际应用中，我们可能需要根据需求对富文本编辑器进行一定的客制化，以满足特定需求。Custom Elements API 就提供了一些简单的方法，方便我们对现有的 Custom Element 进行修改。
下面是一些比较常见的客制化方式：
增加新的工具
可以在工具栏中增加新的按钮，以实现特定的格式化工具。
const newBtn = document.createElement('button'); newBtn.innerText = '新工具'; newBtn.addEventListener('click', () => { document.execCommand('new-tool', false, null); }); toolbar.appendChild(newBtn);
修改样式
我们可以修改富文本编辑器的样式，以符合页面设计。
-- -------------------- ---- ------- -------------- - ---------- ----- ------ ----- -- --- -- - -------------- -------- - -- --- -- - -------------- ------ - -- --- -- -展开代码
添加自定义事件
可以自定义事件，方便在特定情况下触发自定义的处理逻辑。
-- -------------------- ---- ------- ----- ------------- ------- ----------- - ------------- - -- --- ------------------------------------ ---------------------------------- - ----------------------- - -- --- - ------------- - -- --- ----- ------- - --------------------------------------- ---------------------------- ------ ------ ----- --------------- - --- -------------------------- - ------- ------ --- ------------------------------------ - - ----- ------ - ----------------------------------------- -------------------------------------- ------- -- - -------------------------- -- ------ ---展开代码
结语
Custom Elements API 可以让我们很方便地创建自定义的 HTML 元素，并通过 JavaScript 对它们进行操作。在本文中我们使用 Custom Elements API 创建了一个简单的富文本编辑器，并实现了常见的格式化功能。通过定制化，我们可以创建出更加实用和易用的富文本编辑器，满足特定需求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c007a3314edc268460de8f
