论坛 › 马黑黑教程专版 › mhta初稿演示

马黑黑 发表于 2026-5-24 20:46

mhta初稿演示

<style>
    :root { --xx: 60px; }
    .ta-container { margin: 30px auto; width: 700px; height: 450px; border: 1px solid gray; background: linear-gradient(90deg, #ddd var(--xx), white var(--xx), white 0); padding: 0; position: relative; }
    .lnum { position: relative; margin: 0; padding: 0; color: #999; visibility: hidden; }
    .lnum:hover::before { color: red; }
    .lnum::before { position: absolute; content: attr(data-num); left: -5px; top: 0; width: calc(var(--xx) - 10px); height: 100%; text-align: right; cursor: pointer; padding: 0; box-sizing: border-box; visibility: visible; }
    .hlight { color: red; }
    .tMid { text-align: center; }
    #editor { position: absolute; left: var(--xx); width: calc(100% - var(--xx)); height: 100%; box-sizing: border-box; padding: 8px; font-size: 18px; line-height: 25px; background: #fff; border: none; outline: none; resize: none; }
    #btnPrev { padding: 2px 8px; cursor: pointer; border: 1px solid #efe; border-radius: 4px; box-shadow:2px 2px 6px rgba(0,0,0,.25); font-size: 14px; }
</style>

<h1 class="tMid">Mahei Textarea编辑器示范</h1>
<div class="ta-container">
<textarea id="editor" placeholder="输入内容 ..."></textarea>
</div>
<div class="tMid"><button type="button" id="btnPrev" title="预览效果">运行代码</button></div>

<script>
function loadJs(url, callback) {
    var script = document.createElement('script');
    script.charset = 'utf-8';
    script.src = url;
    script.onload = function() {
      if (callback) callback();
    };
    document.head.appendChild(script);
}

loadJs('https://638183.freep.cn/638183/web/js/mhta.js', function() {
    const ta = new TA(editor);
    btnPrev.onclick = () => ta.preView();
});
</script>

马黑黑 发表于 2026-5-24 20:47

核心示例代码：

<style>
    :root { --xx: 60px; }
    .ta-container { margin: 30px auto; width: 700px; height: 450px; border: 1px solid gray; background: linear-gradient(90deg, #ddd var(--xx), white var(--xx), white 0); padding: 0; position: relative; }
    .lnum { position: relative; margin: 0; padding: 0; color: #999; visibility: hidden; }
    .lnum:hover::before { color: red; }
    .lnum::before { position: absolute; content: attr(data-num); left: -5px; top: 0; width: calc(var(--xx) - 10px); height: 100%; text-align: right; cursor: pointer; padding: 0; box-sizing: border-box; visibility: visible; }
    .hlight { color: red; }
    .tMid { text-align: center; }
    #editor { position: absolute; left: var(--xx); width: calc(100% - var(--xx)); height: 100%; box-sizing: border-box; padding: 8px; font-size: 18px; line-height: 25px; background: #fff; border: none; outline: none; resize: none; }
    #btnPrev { padding: 2px 8px; cursor: pointer; border: 1px solid #efe; border-radius: 4px; box-shadow:2px 2px 6px rgba(0,0,0,.25); font-size: 14px; }
</style>

<h1 class="tMid">Mahei Textarea编辑器示范</h1>
<div class="ta-container">
<textarea id="editor" placeholder="输入内容 ..."></textarea>
</div>
<div class="tMid"><button type="button" id="btnPrev" title="预览效果">运行代码</button></div>

<script src="https://638183.freep.cn/638183/web/js/mhta.js"></script>
<script>
    const ta = new TA(editor);
    btnPrev.onclick = () => ta.preView();
</script>

马黑黑 发表于 2026-5-24 20:51

关于 mhta 编辑器：

mhta 是简写，全称为 Mahei TextArea，基于 textarea 标签的编辑器，带 行号、当前行行号高亮、点行号自动选择当前行代码、键盘基本成对符号自动完成、行上下移动（支持多行）、智能缩进、预览等功能。

编辑器UI交由使用者自己设计，通则是一个“父元素+一个textarea标签”外加一个预览按钮。HTML代码结构大约如下：


<div class="ta-container">
    <textarea id="editor" placeholder="输入内容 ..."></textarea>
</div>
<p><button type="button" id="btnPrev" title="预览效果">运行代码</button></p>

CSS 也由使用者自主完成（可参阅二楼代码）。

预览按钮可调用 mhta 编辑器提供的 preView() 函数编程预览功能（二楼代码 22 行）。

引用 mhta：


<script src="https://638183.freep.cn/638183/web/js/mhta.js"></script>
<script>
    const ta = new TA(editor); // editor 是 textarea 的 id
    btnPrev.onclick = () => ta.preView();
</script>

【注】论坛帖子若需要集成 mhta 编辑器，需要动态加载方式引入 mhta.js 资源。

马黑黑 发表于 2026-5-24 20:51

其它说明：

mhta.js 提供一个 TA 对象，该对象需要一个参数，即 textarea 标签操作句柄，例如 id，或自己声明的 textarea DOM 实体。

mhta 现在只是初稿，写于旅途中，尚未仔细斟酌，以后可能需要完善、修复Bugs等。原始代码请打开如下资源：

https://638183.freep.cn/638183/web/js/mhta.js

初稿代码可能存在错误和冗余，若有发现，敬请斧正！

马黑黑 发表于 2026-5-24 22:10

CSS 核心代码：

以下是基于行号的选择器核心设置，不可缺少——

    .lnum { position: relative; margin: 0; padding: 0; color: #999; visibility: hidden; }
    .lnum:hover::before { color: red; }
    .lnum::before { position: absolute; content: attr(data-num); left: -5px; top: 0; width: calc(var(--xx) - 10px); height: 100%; text-align: right; cursor: pointer; padding: 0; box-sizing: border-box; visibility: visible; }
    .hlight { color: red; }

红影 发表于 2026-5-24 22:25

原来是给代码弄的行号，开始还以为是输入文字呢{:4_173:}

马黑黑 发表于 2026-5-25 12:09

红影 发表于 2026-5-24 22:25
原来是给代码弄的行号，开始还以为是输入文字呢

是输入文字的。代码本身就是文字，纯文本的文字。

查看完整版本: mhta初稿演示