當然，我們已經有可以使用的很好的Web編輯器：你只需下載，並插入頁面即可。我以前習慣於使用CodeMirror和ACE。例如，我為CodeMirror寫了一個插件來支持PlantUML。然而，這些編輯器有一個問題：它們難以擴展和難以理解。
當我看到這些產品的代碼時，有一些我不能輕易理解，有一些我沒有自信可以在上面構建東西。
現在，我的哲學是構建簡單的工具，可以工作，可以理解，可以組合和擴展。所以我想嘗試另一種方法，從頭開始構建一個簡單的Web編輯器。
HTML讓我們從一些HTML代碼開始：
<html> <head> <link rel="stylesheet" type="text/css" href="css/style.css" media="screen" /> <script src="js/jquery-3.1.1.min.js"></script> <script src="js/webeditor.js"></script> <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet"> </head> <body> <h1>My Simple Web Editor</h1> <div id="editor"> </div> <span class="blinking-cursor">|</span> <body></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() + "<span class='cursor-placeholder'>|</span>" + 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類中調用方法。
結論好的，讓我們先簡單的開始：一個非常小的編輯器，在這個編輯器中我們可以鍵入、刪除和使用箭頭移動。這不是最令人印象深刻的編輯器。但它簡單，也可以工作。我們可以在此基礎上建立一些機智的東西，去做我們要它做的事情，並且可理解和可擴展。