笔.COOL Html编辑器使用说明
笔.COOL 的HTML编辑器本质上是将一个 html文件拆分成 html、css、js 三个代码片段,以形成 UI、样式与逻辑分离的编辑模式。 渲染时,它们会被合并成一个 html 文件进行渲染。
如果你想要仅仅编写单个 html文档,只要忽略 js、css编辑器即可,因为 html代码片段就是一个 html 文档,笔.COOL 只是将另外的 js、css 的代码片段插入到指定位置而已,你仍然可以在 html代码片段中通过 <script>、<style> 标签来编写脚本与样式。
最终代码转换如下图所示:
编辑器中的 html代码片段会被放到 <body>
中;
js 代码片段会被放到 <body>
的底部,方便用户写 js 代码时通常能够获取到已定义的 DOM 元素;而
css 代码片段会被放到 <head>
中。最终形成文件是一个非常标准的 html 文档。
目前编辑器不支持将js或css代码拆分到另外的文件引入,
但是可以引入第三方公共资源文件(如 jQuery、Three.js、Vuejs、React、GSAP 等),引入第三方的资源文件,只需在 html 片段中添加
<script src="xxx"></script>
或
<link rel="stylesheet" href="xxx" />
标签引入即可 (国内常用公共库CDN有:
BootCDN,
七牛云公共库CDN,
字节跳动静态资源公共库)
。
笔.COOL 的JS编辑器还支持使用 ES6 的 import 语法。除了上述通过 <script src="xxx"></script>
标签的方式引入第三方脚本,还可以直接在 JS编辑器中通过 import
语法引入,例如引入 React库则可以这样写
(注意:如果你打算使用 React,记得将 JS预编译器切换为「Babel(+jsx)」或「TypeScript(+tsx)」):
import React from "https://esm.sh/react@18.3.1";
如果你想使用 ES6 的 <script type="importmap">
, 只需在 html 代码片段中加入以下代码即可。例如引入 three:
此时你就能够在脚本中,通过名称进行 import ,例如:
import * as THREE from 'three';
import {OrbitControls} from 'three/addons/controls/OrbitControls.js';
import Stats from 'three/addons/libs/stats.module.js';