极简HTML在线编辑器（测试）

马黑黑 · 发表于 2022-12-30 12:20

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2023-1-1 08:41 编辑

马黑黑 · 发表于 2022-12-30 12:22

本帖最后由马黑黑于 2023-1-1 10:38 编辑

******************* 更新记录 ***********************

2022年12月30日上午：发布测试版
2022年12月30日傍晚：加入了JS运行功能，完美支持运行音画帖
2023年1月1日上午：加入宽高自适应屏幕机制（80% * 70%）

**************************************************

编辑器在 chromium 和 Firefox 下测试通过。下载文件在本地运行可以获得更舒适的使用体验：马黑网盘 (ysepan.com) [网络相关→pencilcode.rar]

用法说明：

在左侧栏第一个文本框输入 CSS 代码，不能带 CSS 标签 <style> 和 </style> 。例如，下面的代码是没毛病的：

#pa {
  margin: auto;
  width: 360px;
  height: 360px;
  background: pink;
  border-radius: 50%;
}

在左侧栏第二个文本框输入 HTML 代码，例如，配套上面的 CSS 写一个 div 标签：

<div id="pa"></div>

如果愿意，可以不写 CSS 代码，在 HTML 代码中用嵌入式 style 语句，例如，下面的 HTML 代码可以运行：

<div style="margin: auto; width: 360px; height: 360px; background: linear-gradient(to right bottom, pink, silver); border-radius: 50%;"></div>
【提示】针对CSS和HTML输入框，一般来说，只要代码无误，输入过程右边栏就会实时将效果呈现出来，大家可以体验一下，从最简单的代码开始。

左侧栏第三个文本框可输入 JS 代码，JS代码不会立马运行，输入完成或修改好之后，请点击一下下边的“运行JS代码”按钮；当JS框已有合法代码，此时若需要修改CSS和HTML，右侧的效果不能完整运行JS代码，修改在CSS和HTML代码后，需要再点击一次“运行JS代码按钮”。注意，编写JS代码不能带 <script> 和 </script> 标签。

程序极简，可能功能经不起推敲，毕竟好像也没有做什么，它的处理核心功能的代码就这么几行——

<script>

let editbox = [cssbox,htmlbox];

let updateHTML = () => stage.innerHTML = `<style>${cssbox.value}</style>${htmlbox.value}`;

editbox.forEach( (item) => item.oninput = () => updateHTML());

runjs.onclick = () => {
      let jscode = `${jsbox.value}`;
      let func = new Function(jscode);
      func();
}

</script>

马黑黑 · 发表于 2022-12-30 12:22

本帖最后由马黑黑于 2022-12-30 20:36 编辑

JS代码示例：

先在HTML文本框（第二个文本框）输入：

<p id="res">运行结果</p>

然后，在JS文本框输入如下任意一个JS代码：

一、数学运算

let a = 29, b = 36;
res.innerText = '运算结果: ' + (a - b);

二、加入音频媒体

let aud = new Audio();
aud.controls = 'controls';
aud.loop = true;
aud.src = 'https://music.163.com/song/media/outer/url?id=416892336.mp3';
aud.play();
res.innerHTML = '';
res.appendChild(aud);

三、加入 iframe（网易云音乐播放器）

res.innerHTML = '<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="https://music.163.com/outchain/player?type=2&id=416892336&auto=1&height=66"></iframe>';

四、加入图片

let pic = 'https://www.huachaowang.com/uc_server/data/avatar/000/00/71/30_avatar_middle.jpg';
res.innerHTML += `<br><br><img src=${pic} alt="" title="马黑黑头像" />`;

五、改变文本颜色

res.style.color = 'red';