Mahei TextArea文档
<style>.artBox { margin: 20px auto; font: normal 18px/26px sans-serif; }
.artBox mark { padding: 2px 6px; background: #ccc; }
</style>
<div class="artBox">
<p>Mahei TextArea（下面简称 mhta）是一款基于 h5 textarea 控件的 Web 编辑器，集成行号、当前行行号高亮、智能缩进、行移动、键盘成对符号自动完成、编辑器状态保存、效果预览等功能于一身，源码体积在10KB上下，无第三方依赖。</p>
<h2>一、CSS和HTML</h2>
<p>以下是简洁而基础的配套CSS设置和HTML代码结构：</p>
<div class="codebox" data-prev="1">
<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>
</div>
<p>CSS中，.lnum 选择器是行号 p 标签样式，.hlight 选择器是行号高亮样式，.tMid 选择器规范文本居中（可选）；--xx 变量很重要，它是行号区域宽度、编辑器右移距离的重要设置。HTML结构非常简单：一个父元素包裹一个textarea标签，外加一个预览按钮。</p>
<h2>二、脚本引入与应用</h2>
<p>mhta 封装一个名为 TA 的对象，实例化之即可使用，实例化时需要一个参数：textarea 控件DOM实体。例如，依据上面CSS+HTML代码示例，可以这样操作：</p>
<div class="codebox">
<!-- 引入 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>
</div>
<h2>三、实例</h2>
<p>将上述一、二的代码示例进行整合，便可真正运行 mhta 编辑器（注意 maha.js 的地址真实可用）：</p>
<div class="codebox" data-prev="1">
<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>
</div>
<h2>四、编辑器的使用</h2>
<ul>
<li>行号与行号高亮
<ol>
<li>行号 ：自动生成，编辑框里有内容，其右侧就有行号；</li>
<li>高亮 ：当前行行号高亮；</li>
<li>点击：点击行号，选中编辑框对应行。点击或选中编辑框任意行，对应行号高亮；</li>
</ol>
</li>
<li>智能缩进
<ol>
<li>回车 ：继承上一行的缩进距离。有选中文本时，选中的文本会被删除；</li>
<li>Tab ：缩进四个自然空格。有选中文本时，选中文本所有行增加四个自然空格；</li>
<li>退格键 ：若输入光标前面有四个或以上空格，删除四个空格，若不足四个空格保持退格键自然行为；</li>
</ol>
</li>
<li>自动完成 ：输入键盘上的 <mark>`{[('"</mark> 等成对符号，会自动补齐其右侧符号，若有选中文本，左侧符号和后侧符号将其包裹；</li>
<li>行移动 ：编辑器里的行可以上下移动，支持多行操作。方法：点击任意行或选中多行后，按 <mark>alt+↑/↓</mark> 组合键；</li>
<li>保存编辑状态 ：预览、刷新页面和关闭页面均自动触发编辑器内容的自动保存，下次相同浏览器打开相同页面自动加载；</li>
<li>预览编辑器内容 ：TA 对象提供一个预览指令，<mark>preView()</mark>，需要自设触发按钮（详情参阅示例代码）。预览页面以 _blank 方式加载；</li>
<li>集成到自己的项目 ：给 textarea 标签提供 form 父元素即可，注意 textarea 需要一个 name 属性名称以便 submit 时正确提交数据；</li>
<li>其它 ：编辑器理论上支持无限多的文本，但从性能和外观考虑，代码行数在1000行左右较为合适。</li>
</ul>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/helight/linenumber.js';
linenumber();
</script> 生产环境演示地址：
简易编辑器
祝贺黑黑完成的Web 编辑器 Mahei TextArea ，非常简洁实用。很赞{:4_187:} 红影 发表于 2026-5-27 22:29
祝贺黑黑完成的Web 编辑器 Mahei TextArea ，非常简洁实用。很赞
这个，据我所知，开源项目中也有一个叫 textareajs 的，不过实现思路不尽相同，功能也不尽一样 很方便，集成了实用功能，恭喜马老师再出新品{:4_180:} 杨帆 发表于 2026-5-28 15:44
很方便，集成了实用功能，恭喜马老师再出新品
{:4_190:}
页:
[1]