Mahei TextArea文档

马黑黑

Mahei TextArea（下面简称 mhta）是一款基于 h5 textarea 控件的 Web 编辑器，集成行号、当前行行号高亮、智能缩进、行移动、键盘成对符号自动完成、编辑器状态保存、效果预览等功能于一身，源码体积在10KB上下，无第三方依赖。

一、CSS和HTML

以下是简洁而基础的配套CSS设置和HTML代码结构：

<style> .ed-container { --xx: 60px; width: 1000px; height: 480px; border: 2px solid silver; background:linear-gradient(to right,#eee 59px,#aaa 60px,#fff 0); margin: 20px auto; position: relative; } .ed-container:hover { border-color: gray; } .editor { position: absolute; left: var(--xx); width: calc(100% - var(--xx)); height: 100%; box-sizing: border-box; padding: 10px; font-size: 16px; border: none; outline: none; resize: none; } .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; } </style> <div class="ed-container"> <textarea class="editor" placeholder="输入代码 ..."></textarea> </div> <div class="tMid"><button id="btnPre" type="button">预览效果</button></div>

CSS中，.lnum 选择器是行号 p 标签样式，.hlight 选择器是行号高亮样式，.tMid 选择器规范文本居中（可选）；--xx 变量很重要，它是行号区域宽度、编辑器右移距离的重要设置。HTML结构非常简单：一个父元素包裹一个textarea标签，外加一个预览按钮。

二、脚本引入与应用

mhta 封装一个名为 TA 的对象，实例化之即可使用，实例化时需要一个参数：textarea 控件DOM实体。例如，依据上面CSS+HTML代码示例，可以这样操作：

<!-- 引入 mhta.js --> <script charset="utf-8" src="mhta.js"></script> <script> const editor = document.querySelector('.editor'); const ta = new TA(editor); // 实例化TA对象 btnPrev.onclick = () => ta.preView(); // 预览 </script>

三、实例

将上述一、二的代码示例进行整合，便可真正运行 mhta 编辑器（注意 maha.js 的地址真实可用）：

<style> .ed-container { --xx: 60px; width: 1000px; height: 480px; border: 2px solid silver; background:linear-gradient(to right,#eee 59px,#aaa 60px,#fff 0); margin: 20px auto; position: relative; } .ed-container:hover { border-color: gray; } .editor { position: absolute; left: var(--xx); width: calc(100% - var(--xx)); height: 100%; box-sizing: border-box; padding: 10px; font-size: 16px; border: none; outline: none; resize: none; } .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; } </style> <div class="ed-container"> <textarea class="editor" placeholder="输入代码 ..."></textarea> </div> <div class="tMid"><button id="btnPre" type="button">预览效果</button></div> <!-- 引入 mhta.js --> <script charset="utf-8" src="https://638183.freep.cn/638183/web/js/mhta.js"></script> <script> const editor = document.querySelector('.editor'); const ta = new TA(editor); // 实例化TA对象 btnPre.onclick = () => ta.preView(); // 预览 </script>

四、编辑器的使用

• 行号与行号高亮
  1. 行号 ：自动生成，编辑框里有内容，其右侧就有行号；
  2. 高亮 ：当前行行号高亮；
  3. 点击：点击行号，选中编辑框对应行。点击或选中编辑框任意行，对应行号高亮；
• 智能缩进
  1. 回车 ：继承上一行的缩进距离。有选中文本时，选中的文本会被删除；
  2. Tab ：缩进四个自然空格。有选中文本时，选中文本所有行增加四个自然空格；
  3. 退格键 ：若输入光标前面有四个或以上空格，删除四个空格，若不足四个空格保持退格键自然行为；
• 自动完成 ：输入键盘上的 `{[('" 等成对符号，会自动补齐其右侧符号，若有选中文本，左侧符号和后侧符号将其包裹；
• 行移动 ：编辑器里的行可以上下移动，支持多行操作。方法：点击任意行或选中多行后，按 alt+↑/↓ 组合键；
• 保存编辑状态 ：预览、刷新页面和关闭页面均自动触发编辑器内容的自动保存，下次相同浏览器打开相同页面自动加载；
• 预览编辑器内容 ：TA 对象提供一个预览指令，preView()，需要自设触发按钮（详情参阅示例代码）。预览页面以 _blank 方式加载；
• 集成到自己的项目 ：给 textarea 标签提供 form 父元素即可，注意 textarea 需要一个 name 属性名称以便 submit 时正确提交数据；
• 其它 ：编辑器理论上支持无限多的文本，但从性能和外观考虑，代码行数在1000行左右较为合适。

马黑黑

生产环境演示地址：

        简易编辑器

红影

祝贺黑黑完成的Web 编辑器 Mahei TextArea ，非常简洁实用。很赞

马黑黑

红影 发表于 2026-5-27 22:29
祝贺黑黑完成的Web 编辑器 Mahei TextArea ，非常简洁实用。很赞

这个，据我所知，开源项目中也有一个叫 textareajs 的，不过实现思路不尽相同，功能也不尽一样