编写一个非常简单的 javascript 编辑器-mile米乐体育
本文由码农网 – 小峰原创翻译，转载请看清文末的转载要求，欢迎参与我们的付费投稿计划！
当然，我们已经有可以使用的很好的web编辑器：你只需下载，并插入页面即可。我以前习惯于使用codemirror和ace。例如，我为codemirror写了一个插件来支持plantuml。然而，这些编辑器有一个问题：它们难以扩展和难以理解。
当我看到这些产品的代码时，有一些我不能轻易理解，有一些我没有自信可以在上面构建东西。
现在，我的哲学是构建简单的工具，可以工作，可以理解，可以组合和扩展。所以我想尝试另一种方法，从头开始构建一个简单的web编辑器。
遵循用代码说明一切的原则，请看github repo：https://github.com/ftomassetti/simple-web-editor
html
让我们从一些html代码开始：
|
我们需要做好哪些准备工作？
- 当然首先是jquery
- 一些css
- google提供的酷字体
- 一个包含所有代码的js文件（wededitor.js）
- 一个div（编辑器）和一个用于编辑器的跨度（span）
typescript
现在，我们要使用的是typescript，希望它可以减少使用javascript的痛苦。也因为我想尝试它。对于从未使用过typescript的人来说，从根本上说它就是javascript的超集，允许可选地指定类型。类型用于检查错误，然后被忘记，因为最终我们生成javascript。你可以在typescript中使用javascript库，并且当你想要使用javascript库的时候，你可能需要导入该库中所有类型的描述。这是我们在第一行代码中所导入的内容。
///class editor { private caretindex: number; private text: string; constructor() { this.caretindex = 0; this.text = ""; } textbeforecaret() { if (this.caretindex == 0) { return ""; } else { return this.text.substring(0, this.caretindex); } } textaftercaret() { if (this.caretindex == this.text.length) { return ""; } else { return this.text.substring(this.caretindex ); } } generatehtml() { return this.textbeforecaret() "|" this.textaftercaret(); } type(c:string) { this.text = this.textbeforecaret() c this.textaftercaret(); this.caretindex = this.caretindex 1; } deletechar() : boolean { if (this.textbeforecaret().length > 0) { this.text = this.textbeforecaret().substring(0, this.textbeforecaret().length - 1) this.textaftercaret(); this.caretindex--; return true; } else { return false; } } moveleft() : boolean { if (this.caretindex == 0) { return false; } else { this.caretindex--; return true; } } moveright() : boolean { if (this.caretindex == this.text.length) { return false; } else { this.caretindex ; return true; } } } var updatehtml = function() { $("#editor")[0].innerhtml = (window as any).editor.generatehtml(); var cursorpos = $(".cursor-placeholder").position(); var delta = $(".cursor-placeholder").height() / 4.0; $(".blinking-cursor").css({top: cursorpos.top, left: cursorpos.left - delta}); }; $( document ).ready(function() { (window as any).editor = new editor(); updatehtml(); $(document).keypress(function(e){ var c = string.fromcharcode(e.which); (window as any).editor.type(c); updatehtml(); }); $(document).keydown(function(e){ if (e.which == 8 && (window as any).editor.deletechar()) { updatehtml(); }; if (e.which == 37 && (window as any).editor.moveleft()) { updatehtml(); }; if (e.which == 39 && (window as any).editor.moveright()) { updatehtml(); }; }); });
好的，让我们来看看代码。我们有：
- editor类
- 函数updatehtml
- $(document).ready(…)格式的配线（wiring）
editor类
editor类是我们要做文章下功夫的地方。这里我们存储两样东西：
- 包含在编辑器中的文本
- 文本中插入符的位置
textbeforecaret和textaftercaret显然允许我们得到所有文本之前或之后的插入符。
那么，generatehtml做什么呢？它生成html代码，用于放置跨度以指示插入符位置的文本：此元素是插入符占位符。为什么我们不放置插入符本身呢？因为插入符有大小，所以如果我们在文本内部移动插入符，那么我们将导致所有的文本总是在移动。相反，我们移动大小为零的插入符占位符，然后我们使用插入符放置在插入符占位符上方，但在不同的z-index。通过这种方式，基本上我们就可以在我们想要看到的地方看到插入符，而不必左右移动文本就为了给插入符空出地方。
其余的方法允许：
- 插入字符
- 删除字符
- 向左移动插入符
- 向右移动插入符
函数updatehtml
函数updatehtml实现了插入符的把戏：
var updatehtml = function() { $("#editor")[0].innerhtml = (window as any).editor.generatehtml(); var cursorpos = $(".cursor-placeholder").position(); var delta = $(".cursor-placeholder").height() / 4.0; $(".blinking-cursor").css({top: cursorpos.top, left: cursorpos.left - delta}); }; 首先我们更新编辑器的内容，然后我们找到插入符占位符的位置，然后我们移动位于占位符上方的闪烁光标（即占位符）。我们实际上会稍微向左移动一点占位符，因为这样看起来更好。
配线（wiring）
配线包括附加事件处理程序到：
- 当我们键入字符的时候获取
- 当我们删除字符的时候获取
- 当我们使用左箭头和右箭头的时候获取
然后我们从editor类中调用方法。
结论
好的，让我们先简单的开始：一个非常小的编辑器，在这个编辑器中我们可以键入、删除和使用箭头移动。这不是最令人印象深刻的编辑器。但它简单，也可以工作。我们可以在此基础上建立一些机智的东西，去做我们要它做的事情，并且可理解和可扩展。
译文链接：http://www.codeceo.com/article/simple-javascript-editor.html 英文原文：writing a very simple js editor 翻译作者：码农网 – 小峰 [ 转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]