简易HTML代码编辑器

马黑黑

字号 + - 预览

马黑黑

可以复制将如下代码去测试：

<style>
	@import 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.css?v=1.0';
	#tz { margin: 30px 0 30px calc(50% - 513px); background: url('https://638183.freep.cn/638183/t24/webp3/liig.webp') no-repeat center/cover; }
	#mplayer { width: 640px; bottom: 10px; background: none; box-shadow: none; color: snow; }
	#mplayer img { filter: invert(.8); }
	#fsbtn { top: 20px; border-color: snow; color: snow; }
	#lzwrap { width: 400px; height: 400px; }
</style>

<div id="tz" class="pa">
	<audio src="https://music.163.com/song/media/outer/url?id=1427936950"></audio>
	<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/11/48/17/video63633a01b9973.mp4" autoplay loop muted></video>
	<div id="lzwrap"></div>
</div>

<script type="module">
	import { hcplay } from 'https://638183.freep.cn/638183/web/mod/mp3player_lrc_v1.js?v=1.0';
	import { lz } from 'https://638183.freep.cn/638183/web/lizi/canvasparticles.js';
	hcplay(tz);
	lz(lzwrap, {total: 40, color: 'blue'});
	tz.onclick = () => lzwrap.click();
</script>

马黑黑

重头戏是预览功能，使用 window.open 方法实现，可能存在一些浏览器不支持的问题，所以放上来测试一下。

由于是新开启页面，预览功能对HTML代码的支持度良好，举例来说，可以引入外部资源（CSS、JS），能否生效完全取决于资源的有效性和可用性。

编辑器做了简单编辑处理，支持Tab键缩进、回车识别上文自动缩进。

梦江南

这个简易HTML代码编辑器好哦，对像我这样套用代码的人来说，非常需要有这种代码编辑器。

梦江南

谢谢黑黑老师辛苦，收藏了。

花飞飞

我用自己的音画代码试了一试，感觉页面清晰简洁。。
这就是新的音画编辑器么。。
感觉一样，又感觉不太一样。。再瞅瞅

花飞飞

我的图比较大，预览后窗口在左上角看不全，需要点右上角放大后才全屏

红影

有意思，拿黑黑的样例去试验，小球可以暂停了。昨天我试验的时候还不能呢，不知道怎么回事。
把那句放入我做的帖子，哈，小球也能暂停了

花飞飞

还有字体大小调节。。。
分别调到最大和最小看了一下，感觉是考虑做贴者护眼效果。
默认大小就挺好。合适。

马黑黑

花飞飞 发表于 2025-3-6 15:00
还有字体大小调节。。。
分别调到最大和最小看了一下，感觉是考虑做贴者护眼效果。
默认大小就挺好。合适 ...

等宽字体不同的用户环境可能呈现出来的大小不一样，所以设置一个可更改字体大小的机制

马黑黑

红影 发表于 2025-3-6 14:57
有意思，拿黑黑的样例去试验，小球可以暂停了。昨天我试验的时候还不能呢，不知道怎么回事。
把那句放入我 ...

应该是我昨天给的语句不对

马黑黑

花飞飞 发表于 2025-3-6 14:57
我的图比较大，预览后窗口在左上角看不全，需要点右上角放大后才全屏

这就对了：这里预设的预览窗口尺寸我还是放大了一些。作为弹出的预览窗口，可以设置到100%，但是这样一来它就体现不出是预览窗口，所以需要使用者根据预览情况决定是否缩放窗口。

马黑黑

花飞飞 发表于 2025-3-6 14:51
我用自己的音画代码试了一试，感觉页面清晰简洁。。
这就是新的音画编辑器么。。
感觉一样，又感觉不太一 ...

总感觉此前做的代码编辑器它们的预览方式做得不好，一直思考着怎么做才比较理想。现在这个是测试一下，尤其是测试弹出窗口是否被浏览器阻止的问题。现在发现我所用的预览实现机制是不会被阻止的，估计可行，但还需要进一步测试。

马黑黑

梦江南 发表于 2025-3-6 13:33
这个简易HTML代码编辑器好哦，对像我这样套用代码的人来说，非常需要有这种代码编辑器。

马黑黑

梦江南 发表于 2025-3-6 13:34
谢谢黑黑老师辛苦，收藏了。

花飞飞

马黑黑 发表于 2025-3-6 18:05
等宽字体不同的用户环境可能呈现出来的大小不一样，所以设置一个可更改字体大小的机制

嗯哪，原来设计者自然就想到各种不同的情况。。这是个比较贴心的设计。。
显示效果不一样，我可是深有体会，
我整的那个多首专辑贴，一台电脑显5首，一台显六首，这就是差别了。。

花飞飞

马黑黑 发表于 2025-3-6 18:08
这就对了：这里预设的预览窗口尺寸我还是放大了一些。作为弹出的预览窗口，可以设置到100%，但是这样一来 ...

原来是为了区分预览窗口。。
用你给的代码预览窗口可以看全的，而且还挺好看，不放大也很美观。
但用我自己的大图代码，就不得不放大了。。

花飞飞

马黑黑 发表于 2025-3-6 18:11
总感觉此前做的代码编辑器它们的预览方式做得不好，一直思考着怎么做才比较理想。现在这个是测试一下，尤 ...

之前的预览还是好用的，
但不知从啥时候开始我的图下方有一小截就看不到。。
现在这个更好用，不知为啥感觉页面特别简洁。。。好清爽。。。期待成品。。

马黑黑

花飞飞 发表于 2025-3-6 19:21
原来是为了区分预览窗口。。
用你给的代码预览窗口可以看全的，而且还挺好看，不放大也很美观。
但用我 ...

该放就放

马黑黑

花飞飞 发表于 2025-3-6 19:19
嗯哪，原来设计者自然就想到各种不同的情况。。这是个比较贴心的设计。。
显示效果不一样，我可是深有体 ...

我问过头条AI，怎样设计一个兼容性强大的等宽字体，它给的答案很好。我有问题，你的编辑框字体非常漂亮，能告诉我你用什么字体吗？它说，我的字体随用户的环境而变，我也说不准我用的具体字体。