ホームページ > 記事 > ウェブフロントエンド > 非常に単純な JavaScript エディターを作成する

非常に単純な JavaScript エディターを作成する

黄舟オリジナル: 2017-03-02 15:20:331312ブラウズ

もちろん、すぐに使える優れた Web エディターがすでに用意されています。ダウンロードしてページに挿入するだけです。私は CodeMirror と ACE の使用に慣れています。たとえば、PlantUML をサポートする CodeMirror のプラグインを作成しました。ただし、これらのエディタには拡張が難しく、理解しにくいという問題があります。

これらの製品のコードを見ると、なかなか理解できない部分や、何かを構築する自信がない部分があります。

さて、私の哲学は、機能し、理解でき、組み合わせて拡張できるシンプルなツールを構築することです。そこで、別のアプローチを試して、シンプルな Web エディターを一から構築したいと思いました。

コード自体に語らせるという原則に従って、GitHub リポジトリをご覧ください: 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>

us どのような準備が必要ですか?

もちろん最初に jquery
CSS
Google のクールなフォント
すべてのコードを含む JS ファイル (wededitor.js)
p (エディター)スパンエディター

TypeScript

さて、JavaScript での作業が軽減されることを期待して TypeScript を使用します。それも試してみたかったからです。 TypeScript を使用したことがない人のために説明すると、TypeScript は基本的に、型をオプションで指定できる JavaScript のスーパーセットです。型はエラーをチェックするために使用されますが、最終的には JavaScript が生成されるため、忘れられます。 TypeScript では JavaScript ライブラリを使用できます。JavaScript ライブラリを使用する場合は、ライブラリ内のすべての型記述をインポートする必要がある場合があります。これはコードの最初の行でインポートしたものです。

rree

それでは、コードを見てみましょう。

Editorクラス
関数 updateHTML
$(document).ready(...) フォーマットワイヤリング(配線)

Editorクラス

Editorクラスは私たちが必要とするものですdo 頑張れる場所。ここでは 2 つのものを保存します:

エディターに含まれるテキスト
テキスト内のキャレットの位置

TextBeforeCaret と TextAfterCaret を使用すると、明らかにすべてのテキストの前または後にキャレットを取得できます。

では、generateHTML は何をするのでしょうか?キャレットの位置を示すテキストのスパンを配置するための HTML コードを生成します。この要素はキャレットのプレースホルダーです。キャレット自体を配置しないのはなぜでしょうか?キャレットにはサイズがあるため、テキスト内でキャレットを移動すると、テキスト全体が常に移動することになります。代わりに、キャレットプレースホルダーをサイズ 0 で移動し、次にキャレットを使用してキャレットプレースホルダーの上に、ただし異なる Z インデックスに配置します。こうすることで、基本的に、キャレットのためのスペースを作るためにテキストを左右に移動することなく、必要な場所にキャレットを表示できます。

残りのメソッドでは次のことが可能です:

文字を挿入
文字を削除
キャレットを左に移動
キャレットを右に移動

関数 updateHTML

関数 updateHTML は挿入を実装しますキャレットトリック:

/// <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クラスからメソッドを呼び出します。

結論

それでは、簡単に始めましょう。矢印を使用して入力、削除、移動できる非常に小さなエディタです。それほど印象的なエディターではありません。しかし、それはシンプルで機能します。これに基づいて、やりたいことを実行し、理解可能で拡張可能なスマートなものを構築できます。

上記は、非常に簡単な JavaScript エディターの作成内容です。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JavaScript モジュラープログラミング (1): モジュールの書き方次の記事：JavaScript モジュラープログラミング (1): モジュールの書き方

続きを見る