recherche

Maison >interface Web >js tutoriel >Écrivez un éditeur JavaScript très simple

Écrivez un éditeur JavaScript très simple

黄舟
黄舟original
2017-03-02 15:20:331372parcourir

Bien sûr, nous avons déjà un excellent éditeur web prêt à l'emploi : il vous suffit de le télécharger et de l'insérer dans la page. J'ai l'habitude d'utiliser CodeMirror et ACE. Par exemple, j'ai écrit un plugin pour CodeMirror pour prendre en charge PlantUML. Cependant, il y a un problème avec ces éditeurs : ils sont difficiles à étendre et à comprendre.

Quand je regarde le code de ces produits, il y en a certains que je ne peux pas facilement comprendre et d'autres sur lesquels je ne suis pas sûr de pouvoir construire quelque chose.

À l'heure actuelle, ma philosophie est de créer des outils simples qui fonctionnent, peuvent être compris, peuvent être combinés et étendus. J'ai donc voulu essayer une autre approche et créer un éditeur Web simple à partir de zéro.

Suivez le principe d'utilisation du code pour tout expliquer, merci de consulter le repo GitHub : https://github.com/ftomassetti/simple-web-editor

HTML

Commençons par du code 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>

Que devons-nous faire pour préparer ?

  • Bien sûr d'abord jquery

  • Quelques CSS

  • Polices sympas de Google

  • Un fichier JS (wededitor.js) qui contient tout le code

  • Un p (éditeur) et un span pour l'éditeur

TypeScript

Maintenant, nous allons utiliser TypeScript dans l'espoir que cela rendra le travail avec JavaScript moins pénible. Aussi parce que je voulais l'essayer. Pour ceux qui n’ont jamais utilisé TypeScript, il s’agit essentiellement d’un sur-ensemble de JavaScript qui permet de spécifier éventuellement des types. Les types sont utilisés pour vérifier les erreurs, puis oubliés car nous finissons par générer du JavaScript. Vous pouvez utiliser des bibliothèques JavaScript dans TypeScript, et lorsque vous souhaitez utiliser une bibliothèque JavaScript, vous devrez peut-être importer toutes les descriptions de types dans la bibliothèque. C'est ce que nous avons importé dans la première ligne de code. 

/// <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();
    };
  });
});

D'accord, jetons un coup d'œil au code. Nous avons :

  • Classe d'éditeur

  • fonction updateHTML

  • $(document).ready( ...) câblage de format (câblage)

Classe d'éditeur

La classe d'éditeur est l'endroit où nous devons travailler dur. Ici nous stockons deux choses :

  • Le texte contenu dans l'éditeur

  • La position du curseur dans le texte

TextBeforeCaret et TextAfterCaret nous permettent évidemment d'obtenir le caret avant ou après tout texte.

Alors, que fait generateHTML ? Il génère du code HTML pour placer des étendues de texte pour indiquer la position du curseur : cet élément est l'espace réservé au curseur. Pourquoi ne plaçons-nous pas le curseur lui-même ? Étant donné que le curseur a une taille, si nous le déplaçons à l’intérieur du texte, tout le texte sera toujours déplacé. Au lieu de cela, nous déplaçons l’espace réservé au caret avec une taille de zéro, puis nous utilisons le caret pour le positionner au-dessus de l’espace réservé au caret, mais à un z-index différent. De cette façon, nous pouvons voir le curseur là où nous le souhaitons, sans avoir à déplacer le texte vers la gauche ou la droite pour faire de la place au curseur.

Les méthodes restantes permettent :

  • Insérer un caractère

  • Supprimer un caractère

  • Déplacer le curseur vers la gauche

  • Déplacer le curseur vers la droite

Fonction updateHTML

La fonction updateHTML implémente la caret L'astuce : 

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});
};

On met d'abord à jour le contenu de l'éditeur, puis on trouve la position de l'espace réservé au caret, puis on déplace le curseur clignotant qui se trouve au dessus de l'espace réservé (c'est-à-dire l'espace réservé). Nous allons en fait déplacer l'espace réservé un peu vers la gauche car il semble mieux ainsi.

Câblage

Le câblage consiste à attacher des gestionnaires d'événements à :

  • Obtenir

  • Obtenez lorsque nous supprimons des caractères

  • Obtenez lorsque nous utilisons les flèches gauche et droite

puis nous appelons la méthode de la classe Editor.

Conclusion

Bon, commençons simple : un tout petit éditeur où l'on peut taper, supprimer et se déplacer à l'aide des flèches. Ce n'est pas l'éditeur le plus impressionnant. Mais c'est simple et ça marche. Nous pouvons construire quelque chose d'intelligent à partir de cela, qui fait ce que nous voulons et qui soit compréhensible et extensible.

Ce qui précède est le contenu de l'écriture d'un éditeur JavaScript très simple. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !


Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Programmation modulaire JavaScript (1) : Comment écrire des modulesArticle suivant：Programmation modulaire JavaScript (1) : Comment écrire des modules

Articles Liés

Voir plus