突然想做一个基于 web 的代码编辑器。
纯粹出于想做，顺便巩固自己的 js 方面的知识体系。
说明：在写这系列的日志之前，有做过一些 demo，但是更深入的没有实践过。
不多说，想做的需求：
<!-- 需求见 script 处 -->
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8">
<title>Serval</title>
</head>
<style>
body {
margin: 0;
}
.input-container {
position: relative;
top: 50px;
left: -400px;
margin-left: 50%;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0, .2);
width: 800px;
height: 600px;
}
</style>
<body>
<div id="input-container" class="input-container"></div>
<script type="text/javascript">
/**
* 1. 是否只读
* 2. 是否开启行数计数
* 3. 是否开启智能提示
* 4. 是否开启代码高亮
* 5. 语言类型
* 6. 初始内容
* 7. 语法检查
* 8. 是否允许插入图片
* 9. 缩进类型
* 10. 缩进格式
* 11. 多重光标
*/
var serval = new Serval({
/* 目标节点：编辑器的容器 */
editor-container: document.getElementById('input-container'),
/* 以下是可选参数 */
read-only: false, /* 1 */
line-count: true, /* 2 */
code-intellisense: true, /* 3 */
code-highlight: true, /* 4 */
code-type: 'js', /* 5 */
initial-content: '', /* 6 */
syntax-check: true, /* 7 */
image-allowed: true, /* 8 */
indent-type: 'space', /* 9 */
indent-size: 2, /* 10 */
multiple-cursors: true / {number} /* 11 */
})
</script>
</body>
</html>
看上去好像...很复杂的样子，作为一个学生，我是这么想的....._(:3」∠)...
嘛..我自己也是从零开始的..如果有错误的话，errr..好像也没有人看....，希望能指教！
可行性
由于已经有不少在线代码编辑器了，可行性肯定没问题，做不出来只能是自己的问题了...
环境
- windows 64bit
- Firefox 53.0.3 (32 位)
- Google Chrome 58.0.3029.110 (64-bit)
- Sublime Text 3
- Koala （比较喜欢用 SCSS，而且这个很方便，样式方面不是重点，如果用 webpack的 loader 处理什么的也行啦）
虚拟光标
编辑器的重点在于光标的实现：几乎所有的用户操作都会用到光标。由于需要做多重光标，不可能指望 windows 自带的光标能自己分裂出来，所以光标就得自己做啦，所有跟光标有关的事件啦什么的都要自己实现。听上去有点复杂，但是至少实现一个光标的类，这本身代码量很少。大部分的代码都会在一些小的细节上，比如
- 多个光标重叠怎么判断并且处理
- 多个光标下，怎么约定复制粘贴等事件的行为
- 多个光标下，选区重叠怎么处理
之类的东西。
可能有（没）人 （有）会想，就算实现了虚拟光标，怎么跟用户的输入/输出 行为联系在一起呢？
嘛，解决了这个问题，就算打开了新世界的大门....
额，不对，打开了思路。
以删除（BackSpace）为例：
首先需要明确光标的作用是记录下当前的操作字符的位置，所以在虚拟光标类（Cursor）中 ，会有一个坐标
- cursor.logicalX
- cursor.logicalY
logicalY 记录当前光标在编辑器中的第几行，
logicalX 记录当前光标在编辑器中的第几列。
有了这个，
- 通过得到当前行的 元素节点
- 再得到他的文本内容
- 做字符串的拼接处理
- 重新渲染回该 元素节点
就可以得到最基本的删除操作的代码了，实际上的话，还得做不少的判断。
var $line = document.getElementById(SIGN_LINE + logicalY)
var content = $line.textContent
$line.textContent = content.substring(0, logicalY - 1) + content.substring(logicalY, content.length)
这里只做最简单的解释...具体的话，会在后面几节边做边记录。
网友评论