简易代码编辑器带行号版本源码

马黑黑 · 发表于 2025-3-11 18:18

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

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

x

复制代码，存为本地 editor.html 或自己喜欢的名称：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>简易代码编辑器</title>
<style>
#paBox { width: 60vw; height: 60vh; min-width: 400px; min-height: 200px; border: 1px solid rgba(0,0,0,.5); border-radius: 4px; resize: both; overflow: hidden; position: relative; display: grid; place-items: center; margin: 20px auto; }
#paBox::before { position: absolute; content: ''; left: 0; width: 50px; height: 100%; background: #eee; }
@media screen and (max-width: 1280px) { #paBox { width: 90vw; height: 65vh; font-size: 12px; } }
#paBox:hover, #paBox:has(textarea:focus) { box-shadow: 2px 2px 10px rgba(0,0,0,.5); }
#lineNumberBox, #textEditor { position: absolute; width: calc(100% - 60px); height: calc(100% - 20px); border: none; tab-size: 4; white-space: pre-wrap; word-break: break-all; box-sizing: border-box; padding: 0; font: normal 16px/20px Consolas,'Consolas', 'Courier New', Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; overflow: hidden auto; scroll-padding: 8px; }
#textEditor { right: 0; resize: none; outline: none; }
#lineNumberBox { counter-reset: idxNum 0; left: 0; pointer-events: none; }
#lineNumberBox > div { counter-increment: idxNum 1; position: relative; color: transparent; }
#lineNumberBox > div::before { position: absolute; content: counter(idxNum); min-width: 30px; text-align: right; cursor: pointer; color: rgba(0,0,0,.3); pointer-events: auto; }
#lineNumberBox > div:hover::before { color: rgba(0,0,0,.7); font-weight: bold; }
.textCenter { text-align: center; }
</style>
</head>
<body>
<h2 class="textCenter">简易代码编辑器</h2>
<div id="paBox">
<div id="lineNumberBox"><div></div></div>
<textarea id="textEditor" placeholder="输入CSS+HTML+JS代码..." autofocus></textarea>
</div>
<div class="textCenter"><button class="preview-btn" onclick="preView()" title="预览效果">运行代码</button></div>
<script>
const lineNumberBox = document.getElementById('lineNumberBox');
const getCurrentLineIndent = () => {
const cursorPos = textEditor.selectionStart;
const content = textEditor.value;
let lineStart = content.lastIndexOf('\n', cursorPos - 1) + 1;
const line = content.slice(lineStart, cursorPos);
return line.match(/^[\t ]*/)?.[0] || '';
};
const insertTextAtCursor = (text) => {
const start = textEditor.selectionStart;
const end = textEditor.selectionEnd;
const content = textEditor.value;
textEditor.value = content.slice(0, start) + text + content.slice(end);
textEditor.selectionStart = textEditor.selectionEnd = start + text.length;
};
const insertLineNumber = () => {
const textAr = textEditor.value.replace(/[<>]/g, (match) => match === '<' ? '<' : '>').split('\n');
let resTxt = '';
textAr.forEach((a, k) => {
resTxt += `<div onclick="selectLine(${k})">${a || '<br>'}</div>`;
});
lineNumberBox.innerHTML = resTxt;
};
const selectLine = (num) => {
let mpos, tstr = '';
let ar = textEditor.value.split('\n');
for (j = 0; j < num; j ++) {
tstr += ar[j] + 2;
}
mpos = tstr.length;
textEditor.setSelectionRange(mpos, mpos + ar[num].length);
textEditor.focus();
};
const preView = () => {
const value = textEditor.value;
window.localStorage.setItem('ed1', value);
const previewWindow = window.open('', 'preview1', 'width=1200,height=768');
previewWindow.document.open();
previewWindow.document.write(value);
previewWindow.document.close();
}
textEditor.onkeydown = (e) => {
if (e.key === 'Tab') {
e.preventDefault();
insertTextAtCursor('\t');
}
if (e.key === 'Enter') {
e.preventDefault();
const indent = getCurrentLineIndent();
insertTextAtCursor('\n' + indent);
insertLineNumber();
}
};
textEditor.oninput = () => insertLineNumber();
textEditor.onscroll = () => lineNumberBox.scrollTop = textEditor.scrollTop;
lineNumberBox.onwheel = (e) => e.preventDefault();
paBox.onmouseenter = () => textEditor.focus();
textEditor.value = window.localStorage.getItem('ed1');
insertLineNumber();
textEditor.setSelectionRange(0, 0);
</script>
</body>
</html>