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
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
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='cursor-placeholder'>|</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)
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
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 includes attaching event handlers to:
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
