专栏首页java一日一条编写一个非常简单的 JavaScript 编辑器

编写一个非常简单的 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),作者:收听我

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • int 和 Integer 的区别与作用

    int是JAVA八大基本数据类型(byte,shor,int,long,char,boolean,float,double)之一。 JAVA语言为八大基本数据...

    哲洛不闹
  • 为什么程序员的业余项目大多都死了?

    这是一个可悲的事实,因为业余项目原本应该成为一个传奇。在它们最辉煌的时刻,能够让你朝思暮想,夜不成寐,眼中只有一个它。很少很少的一部分人会够保持下去,沉溺于此。...

    哲洛不闹
  • 10+ 实用的 JavaScript 调试小技巧

    除了console.log,debugger就是另一个我很喜欢的快速调试的工具,将debugger加入代码之后,Chrome会自动在插入它的地方停止,很像C或者...

    哲洛不闹
  • 比容器更轻更快的虚拟机

    尽管容器技术在今天越来越被人接受,但是安全性依然是一个绕不开的问题,由于容器采用的是共享内核外加 cgroups 和 namespaces 等黑魔法的方式进行隔...

    Oilbeater
  • 利用d3.js对QQ群资料进行大数据可视化分析

    对于前段时间流出的QQ群数据大家想必已经有所了解了,处理后大小将近100G,多达15亿条关系数据(QQ号,群内昵称,群号,群内权限,群内性别和年龄)和将近900...

    机器学习AI算法工程
  • 责任链模式

      责任链模式:为请求创建一个接收者对象的链,如果一个对象不能处理该请求,把相同请求转给下一个处理。

    OPice
  • 评测精选 | 腾讯云移动直播SDK使用体验测评

    ? 移动直播SDK文档地址 ? ? ? TXLiveBase.getInstance().setLicence(this, licenceURL, lice...

    腾讯云视频
  • ClistCtrl用法及总结(由怎样隐藏ListCtrl列表头的排序小三角形这个bug学习到的知识)

    1 怎样隐藏ListCtrl列表头的排序小三角形 在创建控件是加入|LVS_NOSORTHEADER风格即可。 一下是用法总结: 本文根据本人在项目中的应用,来...

    用户1198337
  • linux中编译安装redis

    我个人的环境是Windows 10的wsl Debian,不过由于是编译安装,所以在linux的所有发行版都是通用的。

    ianzhi
  • Redis

    2.修改slave1的配置文件: [root@redis-slave1 ~]# cd /data/application/redis/ [root@redis-...

    Cyylog

扫码关注云+社区

领取腾讯云代金券