areaEditor.js 的演示界面

[github]

*注：本网站已经全局开启了 areaEditor.js，所有 <textarea> 都可以缩进和补全括号。

介绍

areaEditor.js 是个根据 JavaScript 里几个关于操纵 HTML 原生文本编辑框元素 <textarea> API 而开发的增强版 <textarea> 运行库。它只有不到 2kb 大小，但它能大大增强您在编辑代码时的体验。（纯 ES5 代码，兼容一些老旧浏览器）

功能

1. 按下 TAB 来控制左右缩进

按下 tab 按键，会产生一个缩进单位。

另外，在下面这种情况时，按下 tab 按键，代码会向右一个单位的缩进（蓝色部分为鼠标选中的文本）：

变成 ->

当然，如果同时按下 tab + shift 两个按键，会向左缩进一个单位（必须在选中文字的情况下才有效）。

2. 智能缩进检测

我们常用的缩进有三种类型：四个空格、八个空格、1 个 tab 字符 \t，那 areaEditor.js 是哪种呢？

areaEditor.js 默认的缩进类型是 4 个空格（空白编辑框时），但是它也会智能检测文档的缩进类型进行调整，以文档的第一个缩进为标准。

另外请注意，为了防止混淆，在按下删除键 backspace 时，它只会按照空格挨个删除，而不是一次删除一个缩进单位。

3. 智能填充括号

我们在键入 { } [ ] ( ) < > ' " ` 符号时，会如其他代码编辑器一样进行自动补全。

如果我们依然继续按动键盘，进行手动补全，那么它会忽略自动补全。

4. 闭合符号向右缩进

第一种情况，如果我们光标位于 { } [ ] ( ) < > 这 4 种闭合符号之间，然后按下回车，那么它会自动添加一行，并添加一个缩进单位。如图所示：

按下回车后，

第二种情况，如果我们光标仅仅位于'{ [ ( < 这些闭合符号之后，那么它也会新添加一行，并添加一个缩进单位。

按下回车后，

代码引入方式

1. 在 github 下载

在 https://github.com/kohunglee/areaEditor 或 [单击此处下载] 下载完整的包。

2. 使用 jsdelivr 引入

我们一共有三个文件，分别的 开发版（带注释 raw 版 9.4kb）、普通压缩版（4.06 kb）、极致压缩版（1.98kb）。

它们三者的 jsdelivr 地址分别为：

https://cdn.jsdelivr.net/gh/kohunglee/areaeditor/src/areaeditor.2.0.js
https://cdn.jsdelivr.net/gh/kohunglee/areaeditor/src/areaeditor.2.0.min.js
https://cdn.jsdelivr.net/gh/kohunglee/areaeditor/src/areaeditor.2.0.x.min.js

激活方式

我们在 HTML 中可以这样使用：

<textarea></textarea>
<script src="https://cdn.jsdelivr.net/gh/kohunglee/areaeditor/src/areaeditor.2.0.x.min.js" integrity="sha256-sP3tIYbNNHejSjhs3X0SBLULz54YEbR3g1dSJMvpCME=" crossorigin="anonymous"></script>
<script>
    var editor = new AreaEditor('textarea', {indentType : { type: 'space', count: 4 }});
</script>

其中，AreaEditor() 的参数和 document.querySelectorAll() 的参数一样。

var editor = new AreaEditor('textarea');  // 选中所有的 textarea 元素
var editor = new AreaEditor('.code-editor');  // 选中所有 class 为 code-editor 的 textarea 元素
var editor = new AreaEditor('#code-editor');  // 选中 id 为 code-editor 的 textarea 元素

var editor = new AreaEditor('#code-editor',  {indentType : { type: 'space', count: 4 });  // 后面可以配置缩进，type 里可以有 space 和 tab 两种参数，现在是 4 个空格

editor.indentType.type = 'tab';  // 这样可以动态修改缩进

为什么要这样？

我们在设计网页时，有时会遇到在网页页面上编辑代码的情况，我们通常直接放个原生编辑框 <textarea>，但这样并不好用，另一种是引入成熟的代码编辑器，如 Code Mirror 或 Ace，但它们体积太大了，即便缩减版也动辄 100kb 以上，很多简单的页面没这个必要。

其实，我们只是编辑个代码而已，像语法高亮、自动补全、括号提示等等并不是刚需，缩进才是刚需，此时我们只需解决这个问题，网页的体验感也会大大增强。

为了保证代码体积的简练，之后可能不会添加新的功能，只会将如上四种功能完善。