从头开始构建 CodePen 类型编辑器
想要在您的网站上显示实时代码示例是很常见的,如果您今天想这样做,有一些服务可以提供这种能力。然而,如果你像我一样,你宁愿自己动手。在本教程中,我将为该站点构建自己的类似代码笔的编辑器。
我的目标比大多数人的用例更复杂,因为该站点使用称为MDXT的降价编译器(这是为该站点制作的自定义编译器);我想将此处的代码包含到 MDXT 语言中。因此,考虑到这一点,我将有两个版本并回顾每个版本的工作原理。第一个版本将介绍如何将输入textarea
与 链接iframe
并动态更新它。第二个将保留第一个的核心方面,但旨在处理同一页面上的多个编辑器。
为了保持本文档的整洁,我不会在示例中包含样板 HTML,但如果您需要,请输入
doc
VSCode 并将示例粘贴到 body 标记中。
独立编辑器
从编辑器的标记开始,我们将<textarea>
在页面正文中包含三个标签以及一个<iframe>
. 如果你跳到下面看,你可以看到每个文本区域都有一个data-lang
属性。当我们到达那个点时,这将给我们一个非常性感的方法来与文档更新器交互。我没有在本教程中包含样式,因为我还没有为我的编辑器设计样式。...
<textarea data-lang="html" cols="30" rows="10"></
近期评论