Home >Web Front-end >JS Tutorial >Write a very simple JavaScript editor

Write a very simple JavaScript editor

黄舟Original: 2017-03-02 15:20:331376browse

Of course, we already have a good web editor ready to use: you just download it, and insert it into the page. I'm used to using CodeMirror and ACE. For example, I wrote a plugin for CodeMirror to support PlantUML. However, there is a problem with these editors: they are difficult to extend and difficult to understand.

When I look at the code for these products, there are some that I can’t easily understand, and some that I don’t feel confident I can build something on.

Now, my philosophy is to build simple tools that work, can be understood, can be combined and extended. So I wanted to try another approach and build a simple web editor from scratch.

Follow the principle of using code to explain everything, please see GitHub repo: https://github.com/ftomassetti/simple-web-editor

HTML

Let’s start with some HTML code:

<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>

What preparations do we need to make?

Of course first jquery
Some CSS
Cool fonts provided by Google
A JS file (wededitor.js) that contains all the code
A p (editor) and a span for the editor

TypeScript

Now, we are going to use TypeScript, hoping it will make using JavaScript less painful. Also because I wanted to try it. For those of you who have never used TypeScript, it is basically a superset of JavaScript that allows you to optionally specify types. Types are used to check for errors and then forgotten about because eventually we generate JavaScript. You can use JavaScript libraries in TypeScript, and when you want to use a JavaScript library, you may need to import all type descriptions in the library. This is what we imported in the first line of 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();
    };
  });
});

Okay, let's take a look at the code. We have:

Editor class
Function updateHTML
$(document).ready( ...) format wiring (wiring)

Editor class

The Editor class is where we need to work hard. Here we store two things:

The text contained in the editor
The position of the caret in the text

TextBeforeCaret and TextAfterCaret obviously allow us to get all text before or after the caret.

So, what does generateHTML do? It generates HTML code for placing spans of text to indicate the caret position: this element is the caret placeholder. Why don't we place the caret itself? Because the caret has a size, if we move the caret inside the text, we will cause all of the text to always move. Instead, we move the caret placeholder with a size of zero, and then we use the caret to position it above the caret placeholder, but at a different z-index. This way, we can basically see the caret where we want it, without having to move the text left or right to make room for the caret.

The remaining methods allow:

Inserting characters
Deleting characters
Move the caret to the left
Move the caret to the right

Function updateHTML

The function updateHTML implements the caret The trick:

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

First we update the contents of the editor, then we find the position of the caret placeholder, then we move the blinking cursor that is located above the placeholder (i.e. the placeholder). We're actually going to move the placeholder a little bit to the left because it looks better that way.

Wiring

Wiring includes attaching event handlers to:

##Get when we type characters
Get when we delete characters
Get when we use left arrow and right arrow

then We call the method from Editor class.

Conclusion

Okay, let's start simple: a very small editor in which we can type, delete and move with arrows. It's not the most impressive editor. But it's simple and it works. We can build something smart on top of this that does what we want it to do and is understandable and extensible.

The above is the content of writing a very simple JavaScript editor. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：JavaScript modular programming (1): How to write modulesNext article：JavaScript modular programming (1): How to write modules

See more