简易HTML代码编辑器
<style>.epa {
max-width: 1200px;
margin: auto;
}
.epa> p { margin: 8px 0; }
.editor {
margin: 0;
width: 100%;
height: 500px;
padding: 15px;
font-family: 'Source Code Pro', 'Fira Code', Monaco, Consolas, 'DejaVu Sans Mono', monospace;;
font-size: 16px;
line-height: 1.5;
border: 1px solid rgba(76,175,80,.5);
border-radius: 8px;
outline: none;
resize: vertical;
tab-size: 4;
background: #f8f9fa;
box-sizing: border-box;
}
.editor:hover {
border-color: rgba(76,175,80,.8);
}
.editor:focus {
box-shadow: 0 0 0 3px rgba(76,175,80,.25);
}
.editor::placeholder {
color: #6c757d;
opacity: 1;
font-style: italic;
}
.editor:focus::placeholder {
opacity: 0.5;
}
.preview-btn {
padding: 4px 12px;
font-size: 16px;
color: white;
background: #666;
border: none;
border-radius: 4px;
cursor: pointer;
}
.preview-btn:hover {
background: #333;
}
.txt-btn {
display:inline-block;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ccc;
text-align: center;
line-height: 24px;
cursor: pointer;
margin: 0 6px;
}
.txt-btn:hover {
color: red;
box-shadow: 0 0 2px #000;
}
.txt-center { text-align: center; }
.no-select { user-select: none; }
</style>
<div class="epa">
<p><textarea id="codeEditor" class="editor" placeholder="输入css+html+js代码……"></textarea></p>
<p class="txt-center no-select">字号
<span class='txt-btn' onclick="setFontSize(1)">+</span>
<span class='txt-btn' onclick="setFontSize(-1)">-</span>
<button class="preview-btn" onclick="preView()">预览</button>
</p>
</div>
<script>
var currentFontSize = 16;
const preView = () => {
const value = codeEditor.value;
const previewWindow = window.open('', 'preview1', 'width=1200,height=768');
previewWindow.document.open();
previewWindow.document.write(value);
previewWindow.document.close();
}
const insertTextAtCursor = (text) => {
const start = codeEditor.selectionStart;
const end = codeEditor.selectionEnd;
const content = codeEditor.value;
codeEditor.value = content.slice(0, start) + text + content.slice(end);
codeEditor.selectionStart = codeEditor.selectionEnd = start + text.length;
};
const getCurrentLineIndent = () => {
const cursorPos = codeEditor.selectionStart;
const content = codeEditor.value;
let lineStart = content.lastIndexOf('\n', cursorPos - 1) + 1;
const line = content.slice(lineStart, cursorPos);
return line.match(/^[\t ]*/)?. || '';
};
const setFontSize = (size) => {
var fsize = currentFontSize + size;
if(fsize < 12) fsize = 12;
if(fsize > 20) fsize = 20;
currentFontSize = fsize;
codeEditor.style.fontSize = fsize + 'px';
codeEditor.focus();
};
codeEditor.onkeydown = (e) => {
if (e.key === 'Tab') {
e.preventDefault();
insertTextAtCursor('\t');
}
if (e.key === 'Enter') {
e.preventDefault();
const indent = getCurrentLineIndent();
insertTextAtCursor('\n' + indent);
}
};
</script>
本帖最后由 马黑黑 于 2025-3-6 12:10 编辑 <br /><br /><p>可以复制将如下代码去测试：</p>
<div id="hEdiv"><pre id="hEpre">
<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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/helight/helight1.js';
hlight.hl(hEdiv, hEpre);
</script>
重头戏是预览功能，使用 window.open 方法实现，可能存在一些浏览器不支持的问题，所以放上来测试一下。
由于是新开启页面，预览功能对HTML代码的支持度良好，举例来说，可以引入外部资源（CSS、JS），能否生效完全取决于资源的有效性和可用性。
编辑器做了简单编辑处理，支持Tab键缩进、回车识别上文自动缩进。 这个简易HTML代码编辑器好哦，对像我这样套用代码的人来说，非常需要有这种代码编辑器。 谢谢黑黑老师辛苦，收藏了。{:4_190:} 我用自己的音画代码试了一试，感觉页面清晰简洁。。
这就是新的音画编辑器么。。
感觉一样，又感觉不太一样。。再瞅瞅{:4_173:} 我的图比较大，预览后窗口在左上角看不全，需要点右上角放大后才全屏 有意思，拿黑黑的样例去试验，小球可以暂停了。昨天我试验的时候还不能呢，不知道怎么回事。
把那句放入我做的帖子，哈，小球也能暂停了{:4_173:} 还有字体大小调节。。。
分别调到最大和最小看了一下，感觉是考虑做贴者护眼效果。
默认大小就挺好。合适。{:4_173:} 花飞飞 发表于 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代码编辑器好哦，对像我这样套用代码的人来说，非常需要有这种代码编辑器。
{:4_190:} 梦江南 发表于 2025-3-6 13:34
谢谢黑黑老师辛苦，收藏了。
{:4_191:} 马黑黑 发表于 2025-3-6 18:05
等宽字体不同的用户环境可能呈现出来的大小不一样，所以设置一个可更改字体大小的机制
嗯哪，原来设计者自然就想到各种不同的情况。。这是个比较贴心的设计。。
显示效果不一样，我可是深有体会，{:4_170:}
我整的那个多首专辑贴，一台电脑显5首，一台显六首，这就是差别了。。 马黑黑 发表于 2025-3-6 18:08
这就对了：这里预设的预览窗口尺寸我还是放大了一些。作为弹出的预览窗口，可以设置到100%，但是这样一来 ...
原来是为了区分预览窗口。。
用你给的代码预览窗口可以看全的，而且还挺好看，不放大也很美观。
但用我自己的大图代码，就不得不放大了。。{:4_173:} 马黑黑 发表于 2025-3-6 18:11
总感觉此前做的代码编辑器它们的预览方式做得不好，一直思考着怎么做才比较理想。现在这个是测试一下，尤 ...
之前的预览还是好用的，
但不知从啥时候开始我的图下方有一小截就看不到。。{:4_173:}
现在这个更好用，不知为啥感觉页面特别简洁。。。好清爽。。。期待成品。。 花飞飞 发表于 2025-3-6 19:21
原来是为了区分预览窗口。。
用你给的代码预览窗口可以看全的，而且还挺好看，不放大也很美观。
但用我 ...
该放就放 花飞飞 发表于 2025-3-6 19:19
嗯哪，原来设计者自然就想到各种不同的情况。。这是个比较贴心的设计。。
显示效果不一样，我可是深有体 ...
我问过头条AI，怎样设计一个兼容性强大的等宽字体，它给的答案很好。我有问题，你的编辑框字体非常漂亮，能告诉我你用什么字体吗？它说，我的字体随用户的环境而变，我也说不准我用的具体字体。