目前市面上已经有很多类似的平台和方案了, 类似像 jsfiddle,CodePen,Storybook 这样的平台, 这些平台可以让我们在浏览器中创建代码并直接执行, 无需单独在我们本地创建项目, 所以当你在测试一段代码时, 这些平台可能会为你提供一些帮助.
本篇文章是我们 "如何创建____编辑器" 系列中的第一篇, 后续可能还会包括:
创建一个 Angular 编辑器
创建一个 React 编辑器
...
在本文中, 我们将学习如何创建一个基本的 html/CSS/JS 编辑器.
让我们立即开始吧
首先, 创建一个项目文件夹, 例如:"js_editor"
创建 index.HTML 和 editor.JS 文件
现在, 我们创建一个 HTML,CSS 和 JS 的选项卡, 每个选项卡包含了一个文本框, 一个文本框用于 HTML, 另一个用于 CSS, 最后一个用于 JS. 我们将使用 iframe 来呈现所有的 HTML,CSS,JS.Iframe 是一个创建新浏览器实例的 HTML 标记, 它可以在其中呈现所有你自定义的代码效果, 使用上就像你直接在浏览器中看到的效果是一样的.
现在, 废话不多说, index.HTML 全部代码如下:
- <HTML>
- <title>
- HTML/CSS/JS Playground
- </title>
- <link rel="stylesheet" href='./bootstrap.min.css' />
- <body>
- <style>
- textarea { background-color: black; color: white; width: 600px; height:
- 350px; } iframe { width: 400px; height: 350px }
- </style>
- <div class="container">
- <h3>
- HTML/CSS/JS Playground
- </h3>
- <div class="row">
- <div class="col-12">
- <ul id="myTab" class="nav nav-tabs">
- <li class="active">
- <a href="#html" data-toggle="tab">
- HTML
- </a>
- </li>
- <li>
- <a href="#css" data-toggle="tab">
- CSS
- </a>
- </li>
- <li>
- <a href="#js" data-toggle="tab">
- JS
- </a>
- </li>
- </ul>
- <div id="myTabContent" class="tab-content">
- <div class="tab-pane fade in active" id="html">
- <p>
- <textarea style="float:left" id="htmlTextarea">
- </textarea>
- </p>
- </div>
- <div class="tab-pane fade" id="css">
- <p>
- <textarea style="float:left" id="cssTextarea">
- </textarea>
- </p>
- </div>
- <div class="tab-pane fade" id="js">
- <p>
- <textarea style="float:left" id="jsTextarea">
- </textarea>
- </p>
- </div>
- </div>
- </div>
- <div class="col-12">
- <div>
- <iframe id="iFrame">
- </iframe>
- </div>
- </div>
- </div>
- </div>
- </body>
- <script src="./jquery.js">
- </script>
- <script src="./bootstrap.min.js">
- </script>
- <script src="./editor.js">
- </script>
- </HTML>
在其中, 为了使选项卡功能更容易实现一点, 我用到了 Bootstrap.min.JS,Bootstrap.min.CSS 和 jQuery.JS 来帮助我.
现在, 让我们继续丰富 editor.JS 吧:
- const getEl = id => document.getElementById(id)
- const iFrame = getEl('iFrame').contentWindow.document
- const htmlTextArea = getEl('htmlTextarea')
- const cssTextArea = getEl('cssTextarea')
- const jsTextArea = getEl('jsTextarea')
- document.body.onkeyup = function() {
- iFrame.open()
- iFrame.writeln(
- htmlTextArea.value +
- '<style>' +
- cssTextArea.value +
- '</style>' +
- '<script>' +
- jsTextArea.value +
- '</script>'
- )
- iFrame.close()
- }
我们有一个函数 getEl, 它通过 Dom 的 id 来获取元素, 下面我们得到 iframe 的 contentwindow.document. 然后, 我们分别创建 HTML,CSS,JS textarea 的实例, 并获得内容.
我们监听了 body 元素的 keyup 事件, 如果其子元素输入任意内容, 将会触发对函数的调用, 然后通过 writeln 写入 Dom, 通过获取这些内容, 即能在相应的标签中加入合适的内容.
开始使用编辑器
好的, 经过简单的几行代码, 我们的编辑器已经初具雏形, 请在浏览器中加载 index.HTML. 在这, 我们可以在相应的选项卡中输入相应的代码, 右侧的 iframe 上即可完整呈现你设置的 HTML,CSS 和 JS.
可以通过下面的 gif 看到, 我是如何添加 ID 为 "but" 的按钮, 然后设置样式, 并在按钮上添加 click 事件并弹出 "yes" 框.
结论
制作一个属于自己的编辑器非常简单, 我也在文末提供了本文使用的项目地址, 如果有任何疑问或建议, 欢迎提出, 谢谢!
下载源码演示包
来源: http://www.jianshu.com/p/bf4c4421b2f7