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

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

本帖最后由 马黑黑 于 2023-1-1 08:41 编辑 <br /><br /><style>
#mnbox { margin: -40px 0 0 0); width: 1280px; height: 800px; display: grid; grid-template-columns: 1fr 2fr; grid-template-rows: repeat(3,1fr) auto; grid-template-areas: 'css stage' 'html stage' 'js stage' 'bar stage'; gap: 10px 10px; padding: 0px; background: linear-gradient(60deg, orange,purple); box-shadow: 4px 8px 16px gray; border-radius: 6px; position: relative; z-index: 1; }
#cssbox, #htmlbox, #jsbox { margin: 0; padding: 8px; border: 1px solid darkgray; border-radius: 6px; font: normal 14px sans-serif; outline: none; box-shadow: 4px 2px 8px gray; resize: none; opacity: .95; }
#cssbox { grid-area: css; }
#htmlbox { grid-area: html; }
#jsbox { grid-area: js; }
#stage { grid-area: stage; position: relative; background: #fff; border-radius: 6px; padding: 10px; overflow: auto; box-shadow: 4px 2px 8px gray; opacity: .98; }
.tbar { grid-area: bar; padding: 6px; margin-bottom: 8px; }
.tbar input { outline: none; border: 3px solid snow; background: tan; border-radius: 6px; box-shadow: 1px 2px 2px gray; }
.tbar input:hover { background: orange; }
</style>

<div id="mnbox">
        <textarea id="cssbox" placeholder="css代码（不要输入&lt;style&gt;&lt;/style&gt;）"></textarea>
        <textarea id="htmlbox" placeholder="HTML代码"></textarea>
        <textarea id="jsbox" placeholder="js代码（不要&lt;script&gt;&lt;/script&gt;）"></textarea>
        <div class="tbar"><input id="runjs" type="button" value="运行JS代码" /></div>
        <div id="stage"></div>
</div>

<script>

let editbox = ;

(function() {
        let w = 0.8 * window.screen.width, h = 0.7 * window.screen.height;
        mnbox.style.cssText = `width: ${w}px; height: ${h}px; left: calc(50% - 81px); transform: translateX(-50%);`;
})();

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);
        updateHTML();
        func();
}

</script>

马黑黑 发表于 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 = ;

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';

山里人 发表于 2022-12-30 12:35

学习了！！！

山里人 发表于 2022-12-30 12:36

马黑黑 发表于 2022-12-30 12:22
占位

可视化频谱不显示，哪能上传音乐可显示？

马黑黑 发表于 2022-12-30 12:53

山里人 发表于 2022-12-30 12:36
可视化频谱不显示，哪能上传音乐可显示？

这个编辑器现在不支持JS的运行，仅支持CSS和HTML。频谱需要JS支持才能运行。

红影 发表于 2022-12-30 19:28

这个好，可以直接看到效果呢{:4_199:}

红影 发表于 2022-12-30 19:30

修改了一下宽和高，右边就直接看到了。需要调帖子小图位置的时候太方便了{:4_199:}

马黑黑 发表于 2022-12-30 19:31

红影 发表于 2022-12-30 19:28
这个好，可以直接看到效果呢

和 codepen 比就差远了，但我这么想，如果只是测试下代码，好像也可以就这么简单

马黑黑 发表于 2022-12-30 19:36

红影 发表于 2022-12-30 19:30
修改了一下宽和高，右边就直接看到了。需要调帖子小图位置的时候太方便了

当编辑的元素尺寸大于父框，会有横向、纵向滚动条出现，可以通过拖动滚动条查看效果

樵歌 发表于 2022-12-30 19:50

占位，蹲个坑{:4_189:}

马黑黑 发表于 2022-12-30 19:54

樵歌 发表于 2022-12-30 19:50
占位，蹲个坑

试两句？

红影 发表于 2022-12-30 20:17

马黑黑 发表于 2022-12-30 19:31
和 codepen 比就差远了，但我这么想，如果只是测试下代码，好像也可以就这么简单

过于复杂的用不来，就这样的最好了{:4_199:}

红影 发表于 2022-12-30 20:18

马黑黑 发表于 2022-12-30 19:36
当编辑的元素尺寸大于父框，会有横向、纵向滚动条出现，可以通过拖动滚动条查看效果

嗯嗯，以前调的动图的位置要折腾好半天，用这个就太方便了{:4_199:}

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

红影 发表于 2022-12-30 20:18
嗯嗯，以前调的动图的位置要折腾好半天，用这个就太方便了

对尺寸有感知的人其实也不少

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

红影 发表于 2022-12-30 20:17
过于复杂的用不来，就这样的最好了

我就觉得全世界最简洁的就我这个了，目前JS代码才几行{:4_170:}

红影 发表于 2022-12-30 20:55

马黑黑 发表于 2022-12-30 20:45
对尺寸有感知的人其实也不少

应该是不多吧？

红影 发表于 2022-12-30 20:55

马黑黑 发表于 2022-12-30 20:46
我就觉得全世界最简洁的就我这个了，目前JS代码才几行

是啊，这么少的代码，却能解决大问题{:4_199:}

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

红影 发表于 2022-12-30 20:55
是啊，这么少的代码，却能解决大问题

解决问题的核心代码确实少而又少，写完我自己都觉得奇怪{:4_170:}

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

红影 发表于 2022-12-30 20:55
应该是不多吧？

不少，也不多
页: [1] 2 3
查看完整版本: 极简HTML在线编辑器（测试）