前言
Markdown 是一种轻量级的标记语言，除了能够以纯文本的形式存储和创作，还能够方便地转义为 HTML。很多网站在编辑文章时都会提供一个 Markdown 编辑器，让用户可以更加方便地创作文章。本篇文章将会介绍如何使用 Custom Elements 构建一个可插入的 Markdown 编辑器，方便开发者在自己的网站中使用。
Custom Elements
Custom Elements 是 Web Components 规范中的一部分，它可以让开发者自定义自己的 HTML 标签。通过实现一个 JavaScript 类并继承于 HTMLElement，就可以定义一个全新的 HTML 标签。定义一个 Custom Elements 需要遵守一下规则：
- 使用
class关键字来定义一个新的类，这个类继承自HTMLElement； - 使用
customElements.define方法来注册新的元素； - 实现
constructor方法，它会在元素被创建时调用； - 实现
connectedCallback方法，在元素添加到文档树时调用； - 实现
disconnectedCallback方法，在元素从文档树中删除时调用； - 实现
attributeChangedCallback方法，当元素的属性被添加、删除或修改时调用。
在本文中，我们将会通过继承 HTMLTextAreaElement 来实现自定义的标签，这个标签将作为我们的 Markdown 编辑器。
实现 Markdown 编辑器
定义一个新的类
我们先来创建一个 markdown-editor.js 文件，这个文件将会包含我们自定义的标签实现。首先，定义一个新的类，这个类继承自 HTMLTextAreaElement，它将拥有一些 textarea 标签的原生特性：
class MarkdownEditor extends HTMLTextAreaElement {
constructor() {
super();
}
}注册自定义元素
接下来，使用 customElements.define 方法来注册我们的自定义元素：
customElements.define('markdown-editor', MarkdownEditor, { extends: 'textarea' });注意，我们传递了第三个参数，它告诉浏览器我们的元素是通过继承 textarea 标签来实现的。
现在，我们已经成功地定义了自己的 markdown-editor 元素。
实现编辑器功能
在 constructor 方法中，我们可以为编辑器添加一些自己的功能。例如，我们可以在编辑器上添加快捷键，让用户可以通过键盘快捷键来添加 Markdown 标记。下面是一个例子：
-- -------------------- ---- -------
------------- -
--------
-------------------------------- - -- -
-- --------- -- ------ --- ------- -
---------------------------- ------ ------
-------------------
-
---
-上述代码中，在用户按下 alt + b 组合键时，调用 document.execCommand 方法来添加加粗标记，同时阻止事件继续传播。
实际上，我们还可以实现更多的 Markdown 标记快捷键，但为了篇幅考虑，这里就不再一一展开了。
添加 CSS 样式
在 markdown-editor.js 文件中，我们可以添加一些 CSS 样式来美化编辑器。这里仅展示一段简单的样式，使编辑器看起来更像一个 Markdown 编辑器：
-- -------------------- ---- ------- --------------- - -------- ------ ------------ ---------- ------ ------ ----------- ---------- ----- ------------ ---- -------- ----- ------- ----- -------------- ---- ----------- - --- --- ------- -- -- ----- ----------------- ----- ------ ----- -
将组件插入到页面
最后一步，我们需要将 markdown-editor 元素插入到我们的 HTML 页面中。在 HTML 中添加下面一行代码即可：
<textarea is="markdown-editor"></textarea>
注意，我们需要在 textarea 标签中添加 is 属性，并将值设置为我们的自定义元素名称。
到这里，我们的自定义 Markdown 编辑器就已经实现了。我们可以在任何带有 textarea 标签的页面上插入这个编辑器，并方便地使用 Markdown 标记来编辑文章。
示例代码
下面是完整的 markdown-editor.js 文件代码：
-- -------------------- ---- -------
----- -------------- ------- ------------------- -
------------- -
--------
-------------------------------- - -- -
-- --------- -- ------ --- ------- -
---------------------------- ------ ------
-------------------
-
---
-
-
---------------------------------------- --------------- - -------- ---------- ---
--------------- -
-------- ------
------------ ---------- ------ ------ -----------
---------- -----
------------ ----
-------- -----
------- -----
-------------- ----
----------- - --- --- ------- -- -- -----
----------------- -----
------ -----
-可以直接将这个代码复制到 HTML 文件中使用。
总结
本篇文章介绍了如何使用 Custom Elements 构建一个可插入的 Markdown 编辑器。通过继承 HTMLTextAreaElement，我们定义了一个新的标签，并添加了一些编辑器的功能和 UI 样式。通过在 HTML 页面中插入这个标签，我们能够方便地使用 Markdown 标记来编辑文章。这个例子还远远没有完美，你还可以添加更多的自定义标记和样式，让它更加适合你的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647c8889968c7c53b078be7b