马黑黑 发表于 2025-2-24 20:00
这个必须的
等回复完就去试{:4_187:}
马黑黑 发表于 2025-2-24 20:00
那也不是，我说说也就算了
就是么，这样才自在{:4_173:}
本帖最后由 马黑黑 于 2025-3-6 11:59 编辑 <br /><br /><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-2-24 21:54
等回复完就去试
好的
马黑黑 发表于 2025-2-24 22:18
自在很重要
是啊，才更有乐趣{:4_187:}
马黑黑 发表于 2025-2-24 22:18
好的
我试了，那个视频弄不好。一会去发出来{:4_173:}
红影 发表于 2025-2-25 10:07
我试了，那个视频弄不好。一会去发出来
过去一直封装熊猫视频的，都有套路了
红影 发表于 2025-2-25 10:07
是啊，才更有乐趣
是的
马黑黑 发表于 2025-2-24 21:00
谢谢
谢了又谢
花飞飞 发表于 2025-2-25 18:43
谢了又谢
不嫌多
马黑黑 发表于 2025-2-25 14:33
过去一直封装熊猫视频的，都有套路了
是的，都习惯了{:4_173:}
马黑黑 发表于 2025-2-25 14:34
是的
自在了才更放松。
红影 发表于 2025-2-25 21:27
自在了才更放松。
这是道理
红影 发表于 2025-2-25 21:26
是的，都习惯了
方法总是有的吧
马黑黑 发表于 2025-2-25 20:56
不嫌多
礼多人不怪，客气话总是好听又舒心的。{:4_173:}
花飞飞 发表于 2025-2-26 19:00
礼多人不怪，客气话总是好听又舒心的。
怪好的样纸
马黑黑 发表于 2025-2-25 22:11
这是道理
单位已经够紧绷了，上网再不放松一下，那就太累了。
马黑黑 发表于 2025-2-25 22:11
方法总是有的吧
嗯嗯，看到你的讲解，现在知道了{:4_187:}
红影 发表于 2025-2-26 21:50
嗯嗯，看到你的讲解，现在知道了
过去的知识点
红影 发表于 2025-2-26 21:49
单位已经够紧绷了，上网再不放松一下，那就太累了。
是的