四座大山是我们无法绕过的

  1. monaco
  2. Ace
  3. CodeMirror
  4. Atom
atom
  • 0.01-0.1版本, 主要编辑器代码在editor
  • 1.0开始, 在texteditor
  • 注释风格非常nice, 已经到了注释比代码多的境界. 看的很过瘾.
  • 从0.01版本的1000行到目前的2018年1月版本5000行代码.
  • 我再看看其他编辑器是否有更简单的版本.
monaco
  • 好复杂, 貌似在vscode的src/vs/editor/browser/目录里面.
  • vscode下载了最原始的hello版本, 貌似代码量还可以, editorBrowser.ts只有500多行.
codemirror
  • 果断是这个, 整个项目500行.
  • 第二个版本, 整个项目250行.
  • 这个太帅了.
  • 先说第一个版本思路, 一个textarea放到看不见的地方. 一个iframe是展示和操作的地方.
  • 第二个版本, 抛弃了iframe, 并且也抛弃了textarea, 分两步
    • 一开始有一个display:none的textarea, 和另一个看不见的textarea.
    • 后来, 只有一个display:none的textarea, 问题来了: 如何接受用户输入呢?
    • 需要仔细分析一下:
ace
  • hello版本500行, 很清晰, 建立了一个textarea采集用户输入, 放到了屏幕外边.

阅读

codemirror的早期代码如果要跑起来, 必须搭个服务器, 因为有chrome安全限制. 因此:

package.json

{
	"name": "mirror",
	"version": "0.0.1",
	"main": "./ser",
	"dependencies": {
		"connect": "latest",
		"serve-static": "latest"
	}
}

把原本的codemirror文件都放到./web目录下

ser.js

const connect = require('connect'),
    serveStatic = require('serve-static');

const app = connect();

app.use(serveStatic("./web"));
app.listen(5000);

同时, 还要修改codemirror的主文件: highlight.js, 只需修改主函数:

function addHighlighting(id){
  var textarea = $(id);
  var iframe = createDOM("IFRAME", {src: "editframe.html", "class": "subtle-iframe", id: id, name: id});
  textarea.parentNode.replaceChild(iframe, textarea);
  connect(iframe, "onload", stage2);
  iframe.style.width = "500px";
  iframe.style.height = "400px";

  //前面都不动, 改下面内容
  function stage2(){ 
	  var fdoc = this.contentWindow.document; //此处有修改this原文: frame[id]很莫名, 只能说框架太强大.
	  fdoc.designMode = "on"; 
    importCode(textarea.value, fdoc.body);
    highlight(fdoc.body);
  }
}

然后, 就愉快的跑起来了, 顺便说一句, 版本貌似是0.0.1, 反正是最早的版本. codemirror1版本量不是太大, 翻翻还行, 2就需要先找到0.0.1再往前翻了. 会命令行的同学来说, 这些都不难.