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

首頁

web前端

js教程

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

黄舟

Mar 02, 2017 pm 03:20 PM

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 id="My-nbsp-Simple-nbsp-Web-nbsp-Editor">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});
};

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

配線（wiring）

配線包括附加事件處理程序到：

當我們鍵入字元的時候取得
當我們刪除字元的時候取得
當我們使用左箭頭和右箭頭的時候取得

然後我們從Editor類別中呼叫方法。

結論

好的，讓我們先簡單的開始：一個非常小的編輯器，在這個編輯器中我們可以鍵入、刪除和使用箭頭移動。這不是最令人印象深刻的編輯器。但它簡單，也可以工作。我們可以在此基礎上建立一些機智的東西，去做我們要它做的事情，並且可理解和可擴展。

以上就是寫一個非常簡單的 JavaScript 編輯器的內容，更多相關內容請關注PHP中文網（www.php.cn）！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

JavaScript，C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪，JavaScript、C 和瀏覽器之間到底有什麼關係？它們之間看似毫無關聯，但實際上，它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章，你將了解到JavaScript如何在瀏覽器中運行，C 在瀏覽器引擎中的作用，以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道，JavaScript是前端開發的核心語言，它直接在瀏覽器中運行，讓網頁變得生動有趣。你是否曾經想過，為什麼JavaScr

node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O，這在很大程度上要歸功於流。流媒體匯總處理數據，避免內存過載 - 大型文件，網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript：性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在：1)Python作為解釋型語言，運行速度較慢，但開發效率高，適合快速原型開發；2)JavaScript在瀏覽器中受限於單線程，但在Node.js中可利用多線程和異步I/O提升性能，兩者在實際項目中各有優勢。

JavaScript的起源：探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年，由布蘭登·艾克創造，實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後：什麼語言能力JavaScript？Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行，依賴JavaScript引擎解析和執行代碼。 1）解析階段生成抽象語法樹（AST）；2）編譯階段將AST轉換為字節碼或機器碼；3）執行階段執行編譯後的代碼。

Python和JavaScript的未來：趨勢和預測Apr 27, 2025 am 12:21 AM

Python和JavaScript的未來趨勢包括：1.Python將鞏固在科學計算和AI領域的地位，2.JavaScript將推動Web技術發展，3.跨平台開發將成為熱門，4.性能優化將是重點。兩者都將繼續在各自領域擴展應用場景，並在性能上有更多突破。

Python vs. JavaScript：開發環境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda，適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack，適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。