當然，我們已經有可以使用的很好的Web編輯器：你只需下載，並插入頁面即可。我以前習慣於使用CodeMirror和ACE。例如，我為CodeMirror寫了一個外掛程式來支援PlantUML。然而，這些編輯器有一個問題：它們難以擴展和難以理解。
當我看到這些產品的程式碼時，有一些我不能輕易理解，有些我沒有自信可以在上面建立東西。
現在，我的哲學是建構簡單的工具，可以工作，可以理解，可以組合和擴展。所以我想嘗試另一種方法，從頭開始建立一個簡單的Web編輯器。
遵循用程式碼說明一切的原則，請看GitHub repo：https://github.com/ftomassetti/simple-web-editor
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>
<p id="editor">
</p>
<span class="blinking-cursor">|</span>
<body>
</html>登入後複製
我們需要做好哪些準備？
TypeScript
現在，我們要使用的是TypeScript，希望它可以減少使用JavaScript的痛苦。也因為我想嘗試它。對於從未使用過TypeScript的人來說，從根本上來說它就是JavaScript的超集，允許可選地指定類型。類型用於檢查錯誤，然後被忘記，因為最終我們產生JavaScript。你可以在TypeScript中使用JavaScript函式庫，並且當你想要使用JavaScript函式庫的時候，你可能需要匯入該函式庫中所有類型的描述。這是我們在第一行程式碼中所導入的內容。
/// <reference path="defs/jquery.d.ts" />
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類別
#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類別中呼叫方法。
結論
好的，讓我們先簡單的開始：一個非常小的編輯器，在這個編輯器中我們可以鍵入、刪除和使用箭頭移動。這不是最令人印象深刻的編輯器。但它簡單，也可以工作。我們可以在此基礎上建立一些機智的東西，去做我們要它做的事情，並且可理解和可擴展。
以上就是寫一個非常簡單的 JavaScript 編輯器 的內容，更多相關內容請關注PHP中文網（www.php.cn）！
#
