mhta初稿演示

马黑黑

Mahei Textarea编辑器示范

运行代码

马黑黑

核心示例代码：

1. <style>
   
2.     :root { --xx: 60px; }
   
3.     .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; }
   
4.     .lnum { position: relative; margin: 0; padding: 0; color: #999; visibility: hidden; }
   
5.     .lnum:hover::before { color: red; }
   
6.     .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; }
   
7.     .hlight { color: red; }
   
8.     .tMid { text-align: center; }
   
9.     #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; }
   
10.     #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; }
    
11. </style>
    
12. 
    
13. <h1 class="tMid">Mahei Textarea编辑器示范</h1>
    
14. <div class="ta-container">
    
15. <textarea id="editor" placeholder="输入内容 ..."></textarea>
    
16. </div>
    
17. <div class="tMid"><button type="button" id="btnPrev" title="预览效果">运行代码</button></div>
    
18. 
    
19. <script src="https://638183.freep.cn/638183/web/js/mhta.js"></script>
    
20. <script>
    
21.     const ta = new TA(editor);
    
22.     btnPrev.onclick = () => ta.preView();
    
23. </script>

复制代码

马黑黑

关于 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 资源。

马黑黑

其它说明：

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

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

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

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

马黑黑

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; }

红影

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