寫一個非常簡單的 JavaScript 編輯器-js教程-PHP中文網

當然，我們已經有可以使用的很好的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>

登入後複製

我們需要做好哪些準備？

當然首先是jquery
一些CSS
Google提供的酷字體
一個包含所有程式碼的JS檔（wededitor.js）
#一個p（編輯器）和一個用於編輯器的跨度（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=&#39;cursor-placeholder&#39;>|</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});
};

登入後複製

首先我們更新編輯器的內容，然後我們找到插入符佔位符的位置，然後我們移動位於佔位符上方的閃爍遊標（即佔位符）。我們實際上會稍微向左移動一點佔位符，因為這樣看起來比較好。