编写一个非常简单的 JavaScript 编辑器 -js教程-PHP中文网

首页

web前端

js教程

编写一个非常简单的 JavaScript 编辑器

黄舟

Mar 02, 2017 pm 03:20 PM

javascript

当然，我们已经有可以使用的很好的Web编辑器：你只需下载，并插入页面即可。我以前习惯于使用CodeMirror和ACE。例如，我为CodeMirror写了一个插件来支持PlantUML。然而，这些编辑器有一个问题：它们难以扩展和难以理解。

当我看到这些产品的代码时，有一些我不能轻易理解，有一些我没有自信可以在上面构建东西。

现在，我的哲学是构建简单的工具，可以工作，可以理解，可以组合和扩展。所以我想尝试另一种方法，从头开始构建一个简单的Web编辑器。

遵循用代码说明一切的原则，请看GitHub repo：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>

我们需要做好哪些准备工作？

当然首先是jquery
一些CSS
Google提供的酷字体
一个包含所有代码的JS文件（wededitor.js）
一个p（编辑器）和一个用于编辑器的跨度（span）

TypeScript

现在，我们要使用的是TypeScript，希望它可以减少使用JavaScript的痛苦。也因为我想尝试它。对于从未使用过TypeScript的人来说，从根本上说它就是JavaScript的超集，允许可选地指定类型。类型用于检查错误，然后被忘记，因为最终我们生成JavaScript。你可以在TypeScript中使用JavaScript库，并且当你想要使用JavaScript库的时候，你可能需要导入该库中所有类型的描述。这是我们在第一行代码中所导入的内容。

/// <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类
函数updateHTML
$(document).ready(…)格式的配线（wiring）

Editor类

Editor类是我们要做文章下功夫的地方。这里我们存储两样东西：

包含在编辑器中的文本
文本中插入符的位置

TextBeforeCaret和TextAfterCaret显然允许我们得到所有文本之前或之后的插入符。

那么，generateHTML做什么呢？它生成HTML代码，用于放置跨度以指示插入符位置的文本：此元素是插入符占位符。为什么我们不放置插入符本身呢？因为插入符有大小，所以如果我们在文本内部移动插入符，那么我们将导致所有的文本总是在移动。相反，我们移动大小为零的插入符占位符，然后我们使用插入符放置在插入符占位符上方，但在不同的z-index。通过这种方式，基本上我们就可以在我们想要看到的地方看到插入符，而不必左右移动文本就为了给插入符空出地方。

其余的方法允许：

插入字符
删除字符
向左移动插入符
向右移动插入符

函数updateHTML

函数updateHTML实现了插入符的把戏：

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

首先我们更新编辑器的内容，然后我们找到插入符占位符的位置，然后我们移动位于占位符上方的闪烁光标（即占位符）。我们实际上会稍微向左移动一点占位符，因为这样看起来更好。

配线（wiring）

配线包括附加事件处理程序到：

当我们键入字符的时候获取
当我们删除字符的时候获取
当我们使用左箭头和右箭头的时候获取

然后我们从Editor类中调用方法。

结论

好的，让我们先简单的开始：一个非常小的编辑器，在这个编辑器中我们可以键入、删除和使用箭头移动。这不是最令人印象深刻的编辑器。但它简单，也可以工作。我们可以在此基础上建立一些机智的东西，去做我们要它做的事情，并且可理解和可扩展。

以上就是编写一个非常简单的 JavaScript 编辑器的内容，更多相关内容请关注PHP中文网（www.php.cn）！

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：性能和效率注意事项Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差异主要体现在：1)Python作为解释型语言，运行速度较慢，但开发效率高，适合快速原型开发；2)JavaScript在浏览器中受限于单线程，但在Node.js中可利用多线程和异步I/O提升性能，两者在实际项目中各有优势。

JavaScript的起源：探索其实施语言Apr 29, 2025 am 12:51 AM

JavaScript起源于1995年，由布兰登·艾克创造，实现语言为C语言。1.C语言为JavaScript提供了高性能和系统级编程能力。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技术发展，3.跨平台开发将成为热门，4.性能优化将是重点。两者都将继续在各自领域扩展应用场景，并在性能上有更多突破。

Python vs. JavaScript：开发环境和工具Apr 26, 2025 am 12:09 AM

Python和JavaScript在开发环境上的选择都很重要。1)Python的开发环境包括PyCharm、JupyterNotebook和Anaconda，适合数据科学和快速原型开发。2)JavaScript的开发环境包括Node.js、VSCode和Webpack，适用于前端和后端开发。根据项目需求选择合适的工具可以提高开发效率和项目成功率。