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对象
// 如下实例化方法将取消 mhta 的自动保存编辑内容功能
//const ta = new TA(editor, false); // 实例化TA对象时传递第二个参数 false)
btnPre.onclick = () => ta.preView(); // 预览
</script>
四、编辑器的使用
- 行号与行号高亮
- 行号 ：自动生成，编辑框里有内容，其右侧就有行号；
- 高亮 ：当前行行号高亮；
- 点击：点击行号，选中编辑框对应行。点击或选中编辑框任意行，对应行号高亮；
- 智能缩进
- 回车 ：继承上一行的缩进距离。有选中文本时，选中的文本会被删除；
- Tab ：缩进四个自然空格。有选中文本时，选中文本所有行增加四个自然空格；
- 退格键 ：若输入光标前面有四个或以上空格，删除四个空格，若不足四个空格保持退格键自然行为；
- 自动完成 ：输入键盘上的 `{[('" 等成对符号，会自动补齐其右侧符号，若有选中文本，左侧符号和后侧符号将其包裹；
- 行移动 ：编辑器里的行可以上下移动，支持多行操作。方法：点击任意行或选中多行后，按 alt+↑/↓ 组合键；
- 选中括号内文本：键盘括号类符号，{}、[]、()、<>，在任意一个符号的前面双击，匹配的括号包裹的文本会被选中；
- 保存编辑状态 ：预览、刷新页面和关闭页面均自动触发编辑器内容的自动保存，下次相同浏览器打开相同页面自动加载；
- 预览编辑器内容 ：TA 对象提供一个预览指令，preView()，需要自设触发按钮（详情参阅示例代码）。预览页面以 _blank 方式加载；
- 集成到自己的项目 ：给 textarea 标签提供 form 父元素即可，注意 textarea 需要一个 name 属性名称以便 submit 时正确提交数据。如果不需要自动保存编辑内容或想自主保存，实例化编辑器时加入第二个传参，false；
- 其它 ：编辑器理论上支持无限多的文本，但从性能和外观考虑，代码行数在1000行左右较为合适。
前一篇: tzMaker中级教程六
下一篇: 没有了
发表评论:
评论列表 [0条]
