編寫一個非常簡單的 JavaScript 編輯器

2017-01-29    分類：WEB開發、程式設計開發、首頁精華0人評論發表於2017-01-29
JavaScript

本文由碼農網 – 小峰原創翻譯，轉載請看清文末的轉載要求，歡迎參與我們的付費投稿計劃！

當然，我們已經有可以使用的很好的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>
    <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庫的時候，你可能需要匯入該庫中所有型別的描述。這是我們在第一行程式碼中所匯入的內容。

/// <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類
  • 函式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
翻譯作者：碼農網 – 小峰
[ 轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章