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

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

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

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

遵循用代码说明一切的原则,请看GitHub repo:https://github.com/ftomassetti/simple-web-editor

HTML

让我们从一些HTML代码开始:

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

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

TypeScript

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

好的,让我们来看看代码。我们有:

  • Editor类
  • 函数updateHTML
  • $(document).ready(…)格式的配线(wiring)

Editor类

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

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

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

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

其余的方法允许:

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

函数updateHTML

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

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

配线(wiring)

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

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

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

结论

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

原文发布于微信公众号 - java一日一条(mjx_java)

原文发表时间:2017-02-09

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言并发编程总结

Golang :不要通过共享内存来通信,而应该通过通信来共享内存。这句风靡在Go社区的话,说的就是 goroutine中的 channel ....... 他在...

28290
来自专栏CSDN技术头条

QtQuick 系列教程之 QML 与 C++ 交互

QML 作为一种灵活高效的界面开发语言已经越来越得到业界的认可。QML 负责界面,C++ 负责逻辑,这也是 Qt 官方推荐的开发方式。那么 QML 与 C++ ...

26630
来自专栏JetpropelledSnake

RESTful源码笔记之RESTful Framework的APIview, Viewset总结分析

官方文档:http://www.django-rest-framework.org/ drf为我们提供强大的通用view的功能,本博客对这些view进行简要的总...

17610
来自专栏北京马哥教育

编写Linux Shell脚本的最佳实践

来自:Myths的个人博客 作者:myths 链接:https://blog.mythsman.com/2017/07/23/1/(点击尾部阅读原文前往) 前言...

42190
来自专栏JavaEdge

JSP必备知识点servlet VS CGI如何实现 servlet 单线程模式servlet 页面间对象传递的方法有几种jsp VS servlet<jsp:include page=”includ

37160
来自专栏Crossin的编程教室

【Python 第62课】 调试程序

写代码,不可避免地会出现bug。很多人在初学编程的时候,当写完程序运行时,发现结果与自己预料中的不同,或者程序意外中止了,就一时没了想法,不知道该从何下手,只能...

29990
来自专栏Golang语言社区

Go语言并发编程总结

Golang :不要通过共享内存来通信,而应该通过通信来共享内存。这句风靡在Go社区的话,说的就是 goroutine中的 channel ....... 他在...

31370
来自专栏后端云

python,NFV项目开发--vim

vim是python开发最常用的编辑工具之一,本文不是介绍vim的,而是结合python进行实际项目开发,说一说vim在python开发中的心得。

24230
来自专栏向治洪

Mpg123源代码详解

Mpg123与libmad一样,支持mpeg1,2,2.5音频解码。目前来看mpg123比libmad支持了网络播放功能。而且libmad基本上开源社区在200...

23470
来自专栏炉边夜话

写程序应该注意的地方

1. 对于文本编辑框,一定要判断是否含有非法字符。对于数字型一定要判断是否含有非数字。对于字符型,一定要判断是否在允许的字符内。

19630

扫码关注云+社区

领取腾讯云代金券