CN109508187A - 基于html的微信公众号图文编辑器构建方法及其编辑器 - Google Patents

Abstract

本发明涉及图文编辑技术领域，是一种基于HTML的微信公众号图文编辑器构建方法及其编辑器，前者包括第一步基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；第二步根据脚本语言建立表格编辑模块；第三步基于HTML语言建立图文编辑模块和文字属性编辑模块；第四步：建立页面保存新建模块，对微信图文编辑页面进行新建与保存，以及打开已编辑的微信图文编辑页面进行二次编辑。本发明改变了传统的HTML编辑工具通用的编辑方式，通过HTML语言和脚本语言实现了表格设计布局、动态添加行列、新增列宽度的自动调节、图文宽度的自动调节，使新增列宽度、页面宽度及图文宽度自动匹配终端屏幕，使公众号网页的表现形式更加多变、新颖、美观。

Description

基于HTML的微信公众号图文编辑器构建方法及其编辑器

技术领域

本发明涉及图文编辑技术领域，是一种基于HTML的微信公众号图文编辑器构建方法及其编辑器。

背景技术

社会信息化的快速发展，使微信逐渐成为人们必不可少的交流工具，微信与人类的关系愈来愈密切，微信已经成为日常社交不可或缺的工具。目前微信作为人们聊天交友的工具的典型性逐渐弱化，微信公众号作为个人通信传媒的工具的作用却越来越强大。

但是，对于那些不懂编程的公司员工，要想自己编写出自己想要的宣传页面，相对有些困难。微信公众号图文编辑除了请专业的程序员来写代码外，也可借用现有的HTML编辑工具自行编写。而目前常用的HTML编辑工具，都只能采用通用编辑方式，之后通过拷贝粘贴到微信公众平台后台编辑页面中才能正确地显示在终端上。究其原因，是因为页面的宽度和图文高度等不能自动匹配终端屏幕。

发明内容

本发明提供了，克服了上述现有技术之不足，其能有效解决现有微信图文编辑器存在的页面宽度不能自动匹配终端屏幕的问题。

本发明的技术方案之一是通过以下措施来实现的：一种基于HTML的微信公众号图文编辑器构建方法，包括以下步骤：

第一步：基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；

第二步：根据脚本语言建立表格编辑模块，对微信图文编辑页面模板中的表格进行设置，具体包括对表格的样式设置、在表格内动态行/列的添加及删除设置、新增列的宽度设置；

第三步：基于HTML语言建立图文编辑模块和文字属性编辑模块，对微信图文编辑页面模板中的表格进行图文编辑，对微信图文编辑页面模板中的文字属性进行编辑；

第四步：建立页面保存新建模块，对微信图文编辑页面进行新建与保存，以及打开已编辑的微信图文编辑页面进行二次编辑。

下面是对上述发明技术方案的进一步优化或/和改进：

上述第二步中，对表格的样式设置的具体过程如下：

（一）设置全局变量SelectedTR代表选中行，设置全局变量SelectedTD来代表选中列；

（二）初始值设为空，封装对应的函数来记录当前选择的要进行操作的行、记录当前选择的要进行操作的列及、设置列的属性；

（三）调用封装的函数及给代表当前选择的要进行操作的行、当前选择的要进行操作的列的封装函数添加响应事件，完成对表格的样式设置。第二步中，根据脚本语言封装插入行/列函数及封装追加行/列函数，完成在表格内动态行/列的添加设置。

上述第二步中，新增列的宽度调节设置的具体步骤如下：

（一）获取当前行内的单元格数量x，即列的数；

（二）设置局部变量cols，将当前行内的单元格数量x赋值给局部变量cols；

（三）设定量i=0，判断i是否小于局部变量cols；

（四）若小于则获取当前单元格，将其赋给变量td，若不小于则结束流程；

（五）根据初始表格设置新增列的宽度。

上述第三步中，对微信图文编辑页面模板中的表格进行图文编辑，图文编辑包括输入文字、插入图片，对图片的大小、位置、上传路径进行编辑；对微信图文编辑页面模板中的文字属性进行编辑，包括对文段的字体、颜色、大小、粗细进行编辑。

本发明的技术方案之二是通过以下措施来实现的：一种编辑器，包括：

页面模板设计模块，基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；

表格编辑模块，对微信图文编辑页面模板中表格的样式设置、在表格内动态行/列的添加及删除设置、新增列的宽度设置；

图文编辑模块，对微信图文编辑页面模板中的表格进行图文编辑；

文字属性编辑模块，对微信图文编辑页面模板中的文字属性进行编辑；

页面保存新建模块，对微信图文编辑页面进行新建与保存，以及打开已编辑的微信图文编辑页面进行二次编辑。

本发明改变了传统的HTML编辑工具通用的编辑方式，通过HTML语言和脚本语言实现了表格设计布局、动态添加行列、新增列宽度的自动调节、文字和图片的编辑添加及图文宽度的自动调节，解决了现有微信图文编辑器存在的新增列宽度不能自动匹配终端设备屏幕的问题，使新增列宽度、页面宽度及图文宽度自动匹配终端设备屏幕，使公众号网页的表现形式更加多变、新颖、美观。同时能使页面编辑和公众号发布同步完成，简化了使用过程，增强了用户体验。

附图说明

附图1为本发明实施例一的流程图。

附图2为本发明实施例一中控制新增列宽度的流程图。

附图3为本发明实施例二的微信公众号图文编辑器结构框图。

附图4为本发明微信公众号图文编辑器的界面结构图。

附图5为本发明微信公众号图文编辑器的网页页面效果示意图。

具体实施方式

本发明不受下述实施例的限制，可根据本发明的技术方案与实际情况来确定具体的实施方式。

下面结合实施例及附图对本发明作进一步描述：

实施例1：如附图1、2所示，该基于HTML的微信公众号图文编辑器构建方法，包括以下步骤：

第一步：基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；

这里本发明通过嵌套div对页面进行标识布局，图文编辑布局至少包括4部分，分别为标题显示区域、主内容显示区域、页面编辑菜单显示区域和页面文字属性设置菜单显示区域，在标识标题显示区域和主内容显示区域的div中写入table，在标识页面编辑菜单显示区域和页面文字属性设置菜单显示区域的div中运用hidden标签实现菜单的弹出与隐藏；通过css控制HTML的元素布局和div显示效果。

第二步：根据脚本语言建立表格编辑模块，对微信图文编辑页面模板中的表格进行设置，具体包括对表格的样式设置、在表格内动态行/列的添加及删除设置、新增列的宽度设置；

上述对表格的样式设置的具体过程如下：

（一）设置全局变量SelectedTR代表选中行，设置全局变量SelectedTD来代表选中列；

（二）初始值设均为空，封装recordTR(obj)函数来记录当前选择的要进行操作的行、封装recordTD(obj)函数来记录当前选择的要进行操作的列，封装setTD()设置列的属性；

（三）调用recordTD(obj)函数、recordTR(obj)函数、setTD()函数,并分别向recordTD(obj)函数、recordTR(obj)函数加上响应事件来实现对已选择的对象单元格的颜色变化效果，完成对表格的样式设置。例如选中的要执行操作的单元格背景为红色，没被选中后变化为白色。

上述在表格内动态行添加包括追加一行和插入一行，其具体过程如下：

1、通过封装newrow()函数来实现追加一行，主要调用insertCell（index）方法来完成添加行；

A、创建一个新的 <td>标记元素，把它插入行中指定的位置；

B、新增的单元格将被插入到index所在位置的表元素之前；

其中若index=0，则插入第一行；若index=表格行数，则插入最后一行；

2、通过封装inserrow()函数来实现插入一行；

A、创建一个新的TableRow 对象，表示一个新的<tr>标记，并把它插入表中的指定位置；

B、新行将被插入index所在行之前，若index=表格行数，则新行将被附加到表的末尾。如果index=0，则新行将被插入到一个新的<tbody>段，该段自身会被插入表中。

二者的区别在于设置对象的scrollTop属性值不同。前者需要增加100px；而后者则响应依次减少30px即可。在这两个封装函数中都需要为recordTR（obj）设置onclick按键属性，点击响应recordTR（obj）以及recordTD(obj)函数，用以记录当前行。认为其为选中行列，方便下面的操作。在这两个操作函数中有一部重要的操作，代码如下：

tr.setAttribute("onclick","recordTR(this);"、td.setAttribute("onclick", "recordTD(this);"

setAttribute()用给一个元素或者对象添加指定的属性，并为其赋指定的值。如果这个指定的属性已经存在，就变成修改设置作用。在此调用setAttribute()函数，分别为recordTD(obj)函数、 recordTR(obj)函数添加响应属性，使其具备按键响应，点击它则会触发响应。

上述在表格内动态列添加的具体过程如下：

封装newcol()实现追加一列；封装insertcol()实现插入一列。其中依然调用了insertCell(index)函数，具体实现过程与动态行的添加方法相同。

上述新增列的宽度调节设置的具体过程如下：

如图2所示，本发明通过封装newwidth()函数来控制新增列的宽度，并在添加行列的函数内容最后调用它，来设置宽度，其具体过程如下：

（一）获取当前行内的单元格数量x，即列的数；

（二）设置局部变量cols，将当前行内的单元格数量x赋值给局部变量cols；

（三）设定量i=0，判断i是否小于局部变量cols；

（四）若小于则获取当前单元格，将其赋给变量td（td=SelectedTR.cells[i]），若不小于则结束流程；

（五）根据初始表格设置新增列的宽度（例如若初始表格设置为12列，则根据初始表格设置列宽的代码为：td.colSpan = 12 / cols；td.width = (td.colSpan * 8).toString() + "%"）。

第三步：基于HTML语言建立图文编辑模块和文字属性编辑模块，对微信图文编辑页面模板中的表格进行图文编辑，对微信图文编辑页面模板中的文字属性进行编辑；

编辑文字时：

由于插入的行列都不具备编辑属性，为了使其具备可编辑功能，在页面文字属性设置菜单显示区域div中加入“编辑文字”的超链接，通过点击这个超链接来使选中的单元格具备编辑属性。

即在该单元格中添加一个可编辑的div，设置contenteditable值为'true'，开启该div的编辑模式，使该div是成为可编辑的。

在Style中加入' word-wrap:break-word '属性，使在该div中编辑文字时超过div的宽度可自动换行。将宽度width设为100%，占满整个单元格。同时为了解决如何区分不同的新增可编辑div的问题，可设置一个recordDIV()函数来记录当前div，以便操作中多次的div选择不同的操作，然后根据对不同单元格的操作选择不同的div进行操作即可。

编辑图片时：

与插入文字的方法相似。将一个宽width=100%，id设为newdiv的div插入该单元格中。在此div中嵌套一个<input>标签，其中id设为getpic，类型type设为”file”文件形式，即可在选择插入图片后显示出查找本地图片的窗口，通过这种方式浏览本地图片，进行图片上传准备。

通过上述方式选好本地图片后，封装getpic()函数来获取选中图片的地址，并借用<img>中的scr=”地址”，将图片上传至单元格中。其中调用getFullPath()函数来获取本地图片的路径，以供使用。出于时间原因，若没能获取上传一个图片时，可通过input file获取本机路径，上传至服务器，服务器读取图片内容返回文本内容，并在HTML上打印出来。

对微信图文编辑页面模板中的文字属性进行编辑的过程如下：

1、设置文字的颜色、字体、粗细、倾斜；

文字的颜色、字体、粗细、倾斜设置都是运用了同样的方法，以文字颜色设置为例，其具体过程如下：

在页面编辑菜单显示区域div中加入了<select>标签，并设置onbulr响应，当鼠标对象离开焦点时响应；在<select>标签下的<option>标签中加入颜色的值，如red、blue、orange等，便于之后js响应函数的调用；在响应函数中，运用jquery语法通过id选择器获取该下拉栏中的属性值val，将其赋给样式css中的color属性，从而改变该整个单元格的文字颜色。

文字的字体、粗细、倾斜等属性都运用上述方法，不同在于样式css的属性，字体属性为font-family；粗细属性为font-weight；倾斜属性为font-style。

设置字体大小；

字体的放大主要通过函数biggerfont()执行，具体过程如下所示:

(1)获取当前div单元格中的font-size样式，其值赋给thisEle；

(2)调用parseFloat(thisEle,10)将其转化为10进制，并赋值给变量textFonSize；

(3)获取单位，并设定每次增加的像素，例如：

unit=thisEle.slice(-2);

textFontSize+=2;

(4)将textFontSize+unit的值赋给当前div单元格中的font-size，完成字体放大，所述对应代码如下：

font-size=textFontSize+unit ；

缩小文字大小也是同理，不同的是放大为加参数，缩小则为减参数。

第四步：建立页面保存新建模块，对微信图文编辑页面进行新建与保存，以及打开已编辑的微信图文编辑页面进行二次编辑。

本发明改变了传统的HTML编辑工具通用的编辑方式，通过HTML语言和脚本语言实现了表格设计布局、动态添加行列、新增列宽度的自动调节、文字和图片的编辑添加，图文宽度的自动调节，解决了现有微信图文编辑器存在的新增列宽度不能自动匹配终端设备屏幕的问题，使新增列宽度、页面宽度及图文宽度自动匹配终端设备屏幕，使公众号网页的表现形式更加多变、新颖、美观。同时能使页面编辑和公众号发布同步完成，简化了使用过程，增强了用户体验。

实施例2：如图3、4、5所示，一种编辑器，包括：

页面模板设计模块，基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；图文编辑布局至少包括4部分，分别为标题显示区域、主内容显示区域、页面编辑菜单显示区域和页面文字属性设置菜单显示区域。

表格编辑模块，对微信图文编辑页面模板中表格的样式设置、在表格内动态行/列的添加及删除设置、新增列的宽度设置；

图文编辑模块，对微信图文编辑页面模板中的表格进行图文进行编辑；对微信图文编辑页面模板中的表格进行图文编辑，包括输入文字、插入图片，对图片的大小、位置、上传路径进行编辑。

文字属性编辑模块，对微信图文编辑页面模板中的文字属性进行编辑；对微信图文编辑页面模板中的文字属性进行编辑，包括对文段的字体、颜色、大小、粗细进行编辑。

页面保存新建模块，对微信图文编辑页面进行新建与保存，以及打开已编辑的微信图文编辑页面进行二次编辑。

具体包括：

新建页面：用户能新建一个微信图文页面设计网页模板。

保存页面：用户能够通过该模块将编辑好的网页保存在本地，生成一个在本地可以打开的HTML文件，将该HTML文件上传至服务器，并发布到微信公众号的页面上。

打开已编辑的页面：用户打开已编辑好并保存的页面，并对该页面进行二次的编辑。

以上技术特征构成了本发明的实施例，其具有较强的适应性和实施效果，可根据实际需要增减非必要的技术特征，来满足不同情况的需求。

Claims (9)

1.一种基于HTML的微信公众号图文编辑器构建方法，其特征在于包括以下步骤：

第一步：基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；

第二步：根据脚本语言建立表格编辑模块，对微信图文编辑页面模板中的表格进行设置，具体包括对表格的样式设置、在表格内动态行/列的添加及删除设置、新增列的宽度设置；

第三步：基于HTML语言建立图文编辑模块和文字属性编辑模块，对微信图文编辑页面模板中的表格进行图文编辑，对微信图文编辑页面模板中的文字属性进行编辑；

第四步：建立页面保存新建模块，对微信图文编辑页面进行新建与保存，及打开已编辑的微信图文编辑页面进行二次编辑。

2.根据权利要求1所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第二步中，对表格的样式设置的具体过程如下：

（一）设置全局变量SelectedTR代表选中行，设置全局变量SelectedTD来代表选中列；

（二）初始值设为空，封装对应的函数分别来记录当前选择的要进行操作的行、记录当前选择的要进行操作的列及、设置列的属性；

（三）调用封装函数，并向代表当前选择的要进行操作的行、当前选择的要进行操作的列的封装函数添加响应事件，完成对表格的样式设置。

3.根据权利要求1或2所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第二步中，根据脚本语言封装插入行/列函数及封装追加行/列函数，完成在表格内动态行/列的添加设置。

4.根据权利要求1或2所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第二步中，新增列的宽度调节设置的具体步骤如下：

（一）获取当前行内的单元格数量x，即列的数；

（二）设置局部变量cols，将当前行内的单元格数量x赋值给局部变量cols；

（三）设定量i=0，判断i是否小于局部变量cols；

（四）若小于则获取当前单元格，将其赋给变量td，若不小于则结束流程；

（五）根据初始表格设置新增列的宽度。

5.根据权利要求3所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第二步中，新增列的宽度调节设置的具体步骤如下：

（一）获取当前行内的单元格数量x，即列的数；

（二）设置局部变量cols，将当前行内的单元格数量x赋值给局部变量cols；

（三）设定量i=0，判断i是否小于局部变量cols；

（四）若小于则获取当前单元格，将其赋给变量td，若不小于则结束流程；

（五）根据初始表格设置新增列的宽度。

6.根据权利要求1或2或5所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第三步中，对微信图文编辑页面模板中的表格进行图文编辑，图文编辑包括输入文字、插入图片，对图片的大小、位置、上传路径进行编辑；对微信图文编辑页面模板中的文字属性进行编辑，包括对文段的字体、颜色、大小、粗细进行编辑。

7.根据权利要求3所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第三步中，对微信图文编辑页面模板中的表格进行图文编辑，图文编辑包括输入文字、插入图片，对图片的大小、位置、上传路径进行编辑；对微信图文编辑页面模板中的文字属性进行编辑，包括对文段的字体、颜色、大小、粗细进行编辑。

8.根据权利要求4所述的基于HTML的微信公众号图文编辑器构建方法，其特征在于第三步中，对微信图文编辑页面模板中的表格进行图文编辑，图文编辑包括输入文字、插入图片，对图片的大小、位置、上传路径进行编辑；对微信图文编辑页面模板中的文字属性进行编辑，包括对文段的字体、颜色、大小、粗细进行编辑。

9.一种使用如权利要求1至8中任意一项所述基于HTML的微信公众号图文编辑器构建方法的编辑器，其特征在于包括：

页面模板设计模块，基于HTML语言建立包含多个图文编辑布局结构的微信图文编辑页面模板；

表格编辑模块，对微信图文编辑页面模板中表格的样式设置、在表格内动态行/列的添加及删除设置、新增列的宽度设置；

图文编辑模块，对微信图文编辑页面模板中的表格进行图文编辑；

文字属性编辑模块，对微信图文编辑页面模板中的文字属性进行编辑；

页面保存新建模块，对微信图文编辑页面进行新建与保存，以及打开已编辑的微信图文编辑页面进行二次编辑。