基于类的多在线编辑器的设计

黄金春 杜娟娇

摘要：当前常需要在web2.0网站设计中使用多个在线编辑器，一般设计模式使网页较为臃肿。为此该文介绍一种基于类的多在线编辑器设计思路，并提供了相关的主要代码，实践证明该方法不但能较好的解决网页臃肿问题还可以加快网页加载速度。其代码均JavaScript程序设计，读者也可根据此思路用于其他方面。

关键词：多在线编辑器;类设计;JavaScript

中图分类号：TP311      文献标识码：A

文章编号：1009-3044（2020）16-0089-02

1 前言

在进行web2.0网站设计时，在线编辑器作为一种实用的内容输入平台常常在网页里进行使用，而在某些特殊的场合一个网页里甚至会使用到多个在线编辑器（比如在进行网络教学平台设计的时候，在设计题目输入方面，题干部分需要用到在线编辑器，题目里的每个选择也需要用到在线编辑器）。这种情况下，必将涉及多在线编辑器设计问题。比较常用的方法是，为每个需要的编辑器都设计html代码，并且为了区分不同在线编辑器内容或操作，引入大量的id，这样不但使网页非常庞大，也会产生非常多的id，使得网页的加载非常缓慢，影响用户的体验。在此介绍一种基于JavaScript类的多在线编辑器的设计，实践证明该设计不但可以大大减少网页的代码量，同时也减少id的使用。

2 JavaScript类的定义及使用

JavaScript是web前端最为常用的一种应用程序，也是进行在线编辑器设计的程序。JavaScript1.5 版本后提供了很多新的特征[1]，其中最为吸引人的就是引入了类的概念。只是在JavaScript里类和java里的类定义并不一样。

在JavaScript中没有明确的类定义语法，它是一种以对象为主的设计方式，主要语法为：

3 基于类设计的在线编辑器原理

4 基于类设计的在线编辑器的实现

4.1 在线编辑器类的工作流程

4.2 在线编辑器类的外观设计

在线编辑器的外观设计并不复杂，可以使用现在常用的html和css进行设计，这不是本文关键点，在此不做详细说明。这里仅说明需要注意的问题，编辑器的html文档仅是部分的html代码。之所以是部分html代码主要是因为，在线编辑器并不作为原来网页的一个内容，而是单独作为一个模块。当需要它时才在原来网页里加载。

4.3 在线编辑器类设计

4.3.1 类的属性设计

类的设计是整个设计的核心，因为要进行区分多个对象实例，所以设计编辑器构造函数时，需要增加记录是第几个对象作为属性参数，此外还需要有存储其宽度、对应的浮动编辑框等等属性。类设计核心代码示例如下：

4.3.2 类的方法设计

编辑器类还要包括一些必要的方法，这些方法分两种类型，一种是修改编辑器的某些属性的方法，如宽度等。

另一种是实现编辑器功能的方法，这是编辑器类的重要方法，具体功能设计是JavaScript程序编写，功能方面内容在很多文章里都介绍有，例如：让浏览器执行命令使用execCommand方法[2]。在此仅说明类方面的设计部分，这个部分设计关键有两点，首先是语法必须按照JavaScript类方法来设计，其次在进行对象操作时，必需使用this引用。其主要代码如下所示：

4.4 在线编辑器类的共有方法设计

编辑器除了自已的方法外，还需要一些共用的方法，例如，当需要进行某些对话操作时，要先对网页进行层遮盖，这些方法并不需要区分是哪个编辑器操作的，因此设计为共有的方法，其实就是原JavaScript的函数语法，类似代码如下：

4.5 编辑器类的使用

4.5.1 在网页里设置定位

4.5.2 使用JavaScript进行加载编辑器代码

在JavaScript里使用共有函数进行查找所有class，并加载对应的在线编辑器代码。主要代码如下：

4.5.3 实现在线编辑器的功能按钮单击

编辑器里的功能按钮，主要指那些工具栏里的按钮，其可以使用onclick事件进行，示例代码如下：

在JavaScript里设置对应函数实现单击功能，该函数首先使用JavaScript的Event对象[3]获取单击事件的源，即获得是什么单击，然后获得事件源对应的编辑器编号（就是产生实例的那个参数），即是哪个编辑器进行了单击，然后调用对应的编辑器对象完成操作，主要代码如下：

5 小结

在web2.0模式下，网页设计中都包括有在线编辑器的需求，而对于那些需进行多输入的情况，往往会在一个网页里需要多个文本编辑器。在自行设计时，笔者采用了类设计的模式，实践证明它是一种可以缩小程序规模，加快页面加载速度的办法。本文没有介绍如何实现在线编辑器各种功能，有兴趣的读者可在网上查阅，这方面的内容很多。

参考文献：

[1] Cody Lindley.JavaScript启示录[M].徐涛，译.北京：人民邮电出版社，2016.

[2] Mozilla and individual contributors Document.execCommand（）[EB/OL].[2019-12-20].https：//developer.mozilla.org/en-US/docs/Web/API/Document/execCommand.

[3] w3school HTML DOM Event 对象[EB/OL].[2019-12-20].https：//www.w3school.com.cn/jsref/dom_obj_event.asp.

【通聯编辑】谢媛媛