非常に単純な JavaScript エディターを作成する-jsチュートリアル-php.cn

ホームページ

ウェブフロントエンド

jsチュートリアル

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

黄舟

Mar 02, 2017 pm 03:20 PM

javascript

もちろん、すぐに使える優れた 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 id="My-nbsp-Simple-nbsp-Web-nbsp-Editor">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の起源：その実装言語の調査Apr 29, 2025 am 12:51 AM

JavaScriptは1995年に発信され、Brandon Ikeによって作成され、言語をCに実現しました。 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テクノロジーの開発を促進します。どちらもそれぞれのフィールドでアプリケーションシナリオを拡大し続け、パフォーマンスをより多くのブレークスルーを行います。

Python vs. JavaScript：開発環境とツールApr 26, 2025 am 12:09 AM

開発環境におけるPythonとJavaScriptの両方の選択が重要です。 1）Pythonの開発環境には、Pycharm、Jupyternotebook、Anacondaが含まれます。これらは、データサイエンスと迅速なプロトタイピングに適しています。 2）JavaScriptの開発環境には、フロントエンドおよびバックエンド開発に適したnode.js、vscode、およびwebpackが含まれます。プロジェクトのニーズに応じて適切なツールを選択すると、開発効率とプロジェクトの成功率が向上する可能性があります。

JavaScriptはCで書かれていますか？証拠を調べるApr 25, 2025 am 12:15 AM

はい、JavaScriptのエンジンコアはCで記述されています。1）C言語は、JavaScriptエンジンの開発に適した効率的なパフォーマンスと基礎となる制御を提供します。 2）V8エンジンを例にとると、そのコアはCで記述され、Cの効率とオブジェクト指向の特性を組み合わせて書かれています。3）JavaScriptエンジンの作業原理には、解析、コンパイル、実行が含まれ、C言語はこれらのプロセスで重要な役割を果たします。

JavaScriptの役割：WebをインタラクティブでダイナミックにするApr 24, 2025 am 12:12 AM

JavaScriptは、Webページのインタラクティブ性とダイナミズムを向上させるため、現代のWebサイトの中心にあります。 1）ページを更新せずにコンテンツを変更できます。2）Domapiを介してWebページを操作する、3）アニメーションやドラッグアンドドロップなどの複雑なインタラクティブ効果、4）ユーザーエクスペリエンスを改善するためのパフォーマンスとベストプラクティスを最適化します。

CおよびJavaScript：接続が説明しましたApr 23, 2025 am 12:07 AM

CおよびJavaScriptは、WebAssemblyを介して相互運用性を実現します。 1）CコードはWebAssemblyモジュールにコンパイルされ、JavaScript環境に導入され、コンピューティングパワーが強化されます。 2）ゲーム開発では、Cは物理エンジンとグラフィックスレンダリングを処理し、JavaScriptはゲームロジックとユーザーインターフェイスを担当します。

Webサイトからアプリまで：JavaScriptの多様なアプリケーションApr 22, 2025 am 12:02 AM

JavaScriptは、Webサイト、モバイルアプリケーション、デスクトップアプリケーション、サーバー側のプログラミングで広く使用されています。 1）Webサイト開発では、JavaScriptはHTMLおよびCSSと一緒にDOMを運用して、JQueryやReactなどのフレームワークをサポートします。 2）ReactNativeおよびIonicを通じて、JavaScriptはクロスプラットフォームモバイルアプリケーションを開発するために使用されます。 3）電子フレームワークにより、JavaScriptはデスクトップアプリケーションを構築できます。 4）node.jsを使用すると、JavaScriptがサーバー側で実行され、高い並行リクエストをサポートします。

See all articles

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。