CN113867726A - 页面富文本编辑器的扩展方法和装置、存储介质、电子设备 - Google Patents

Abstract

本公开实施例公开了一种页面富文本编辑器的扩展方法和装置、存储介质、电子设备，其中，方法包括：响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；导出所述富文本编辑器对应的第一数据和所述至少一个编辑后的编辑模块对应的至少一组第二数据；基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面；本实施例通过对编辑模块进行独立编辑，实现了视觉上编辑富文本内部内容的效果，但其编辑过程不受限于富文本的控制，事件和内容改动处理比较灵活。

Description

页面富文本编辑器的扩展方法和装置、存储介质、电子设备

技术领域

本公开涉及数据处理技术领域，尤其是一种页面富文本编辑器的扩展方法和装置、存储介质、电子设备。

背景技术

在文档服务中，为了实现更丰富的展示效果，都会使用富文本编辑器来录入文档，富文本编辑器提供修改字体字号及颜色、***图片等功能，但是随着录入人的需求的富文本形式增多，比如在文档中增加表单提交等功能，现有的富文本编辑器已经无法满足。

发明内容

为了解决上述技术问题，提出了本公开。本公开的实施例提供了一种页面富文本编辑器的扩展方法和装置、存储介质、电子设备。

根据本公开实施例的一个方面，提供了一种页面富文本编辑器的扩展方法，包括：

响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；

根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；

导出所述富文本编辑器对应的第一数据和所述至少一个编辑后的编辑模块对应的至少一组第二数据；

基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面。

可选地，所述在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块，包括：

在所述富文本编辑器的数据中***与所述至少一个编辑模块大小对应的至少一个占位元素；其中，每个所述占位元素对应一个编辑模块；

将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置。

可选地，所述将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置，包括：

通过绝对定位将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置。

可选地，所述根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块，包括：

响应于监听得到对所述至少一个编辑模块的点击事件，调整所述至少一个编辑模块的状态为编辑状态，调整所述富文本编辑器的状态为只读状态；

控制所述至少一个编辑模块在编辑状态下，根据所述模块编辑指令接受编辑内容，得到编辑后的至少一个编辑模块。

可选地，还包括：

响应于监听得到对所述至少一个编辑模块的失去焦点事件，调整所述至少一个编辑模块的状态为只读状态，调整所述富文本编辑器的状态为编辑状态；

控制所述富文本编辑器在编辑状态下，根据文本编辑指令接受编辑内容，得到编辑后的富文本编辑器。

可选地，所述基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面，包括：

确定所述第一数据中包括的所述至少一个占位元素对应的至少一个占位数据；

用所述至少一个第二数据替换掉所述至少一个占位数据，得到替换后的完整数据；

基于所述完整数据对所述页面进行渲染，得到渲染后的页面。

可选地，还包括：

响应于接收对所述渲染后的页面进行编辑的第一更新指令；

获得所述渲染后的页面对应的完整数据；

基于所述完整数据，得到具有至少一个编辑模块的富文本编辑器；

根据第二更新指令对所述至少一个编辑模块和/或所述富文本编辑器进行更新处理；

导出更新后的至少一个编辑模块和/或富文本编辑器对应的数据，并基于更新后的数据对页面进行渲染，得到更新后的页面。

可选地，所述基于所述完整数据，得到具有至少一个编辑模块的富文本编辑器，包括：

基于所述完整数据分解得到至少一组第二数据和第一数据；

将所述第一数据输入所述页面对应的富文本编辑器；

对所述至少一组第二数据依次进行渲染，得到至少一个编辑模块；

将所述至少一个编辑模块覆盖到所述富文本编辑器中至少一个占位元素对应的位置，得到所述具有至少一个编辑模块的富文本编辑器。

可选地，所述基于所述完整数据分解得到至少一组第二数据和第一数据，包括：

根据所述至少一个编辑模块对应的设定参数，从所述完整数据中识别并提取所述至少一个编辑模块对应的至少一组第二数据；

将所述完整数据中对应所述至少一组第二数据的位置替换为至少一个占位元素，得到所述富文本编辑器对应的第一数据。

根据本公开实施例的另一方面，提供了一种页面富文本编辑器的扩展装置，包括：

编辑扩展模块，用于响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；

指令响应模块，用于根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；

数据导出模块，用于导出所述富文本编辑器对应的第一数据和所述至少一个编辑后的编辑模块对应的至少一组第二数据；

页面渲染模块，用于基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面。

可选地，所述编辑扩展模块，包括：

占位单元，用于在所述富文本编辑器的数据中***与所述至少一个编辑模块大小对应的至少一个占位元素；其中，每个所述占位元素对应一个编辑模块；

模块覆盖单元，用于将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置。

可选地，所述模块覆盖单元，具体用于通过绝对定位将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置。

可选地，所述指令响应模块，具体用于响应于监听得到对所述至少一个编辑模块的点击事件，调整所述至少一个编辑模块的状态为编辑状态，调整所述富文本编辑器的状态为只读状态；控制所述至少一个编辑模块在编辑状态下，根据所述模块编辑指令接受编辑内容，得到编辑后的至少一个编辑模块。

可选地，本实施例提供的装置还包括：

富文本编辑模块，用于响应于监听得到对所述至少一个编辑模块的失去焦点事件，调整所述至少一个编辑模块的状态为只读状态，调整所述富文本编辑器的状态为编辑状态；控制所述富文本编辑器在编辑状态下，根据文本编辑指令接受编辑内容，得到编辑后的富文本编辑器。

可选地，所述页面渲染模块，具体用于确定所述第一数据中包括的所述至少一个占位元素对应的至少一个占位数据；用所述至少一个第二数据替换掉所述至少一个占位数据，得到替换后的完整数据；基于所述完整数据对所述页面进行渲染，得到渲染后的页面。

可选地，本实施例提供的装置还包括：

更新指令模块，用于响应于接收对所述渲染后的页面进行编辑的第一更新指令；

数据获取模块，用于获得所述渲染后的页面对应的完整数据；

数据分解模块，用于基于所述完整数据，得到具有至少一个编辑模块的富文本编辑器；

更新处理模块，用于根据第二更新指令对所述至少一个编辑模块和/或所述富文本编辑器进行更新处理；

更新渲染模块，用于导出更新后的至少一个编辑模块和/或富文本编辑器对应的数据，并基于更新后的数据对页面进行渲染，得到更新后的页面。

可选地，所述数据分解模块，具体用于基于所述完整数据分解得到至少一组第二数据和第一数据；将所述第一数据输入所述页面对应的富文本编辑器；对所述至少一组第二数据依次进行渲染，得到至少一个编辑模块；将所述至少一个编辑模块覆盖到所述富文本编辑器中至少一个占位元素对应的位置，得到所述具有至少一个编辑模块的富文本编辑器。

可选地，所述数据分解模块在基于所述完整数据分解得到至少一组第二数据和第一数据时，用于根据所述至少一个编辑模块对应的设定参数，从所述完整数据中识别并提取所述至少一个编辑模块对应的至少一组第二数据；将所述完整数据中对应所述至少一组第二数据的位置替换为至少一个占位元素，得到所述富文本编辑器对应的第一数据。

根据本公开实施例的又一方面，提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行上述任一实施例所述的页面富文本编辑器的扩展方法。

根据本公开实施例的还一方面，提供了一种电子设备，所述电子设备包括：

处理器；

用于存储所述处理器可执行指令的存储器；

所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现上述任一实施例所述的页面富文本编辑器的扩展方法。

基于本公开上述实施例提供的一种页面富文本编辑器的扩展方法和装置、存储介质、电子设备，响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；导出所述富文本编辑器对应的第一数据和所述至少一个编辑后的编辑模块对应的至少一组第二数据；基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面；本实施例通过对编辑模块进行独立编辑，实现了视觉上编辑富文本内部内容的效果，但其编辑过程不受限于富文本的控制，事件和内容改动处理比较灵活。

下面通过附图和实施例，对本公开的技术方案做进一步的详细描述。

附图说明

通过结合附图对本公开实施例进行更详细的描述，本公开的上述以及其他目的、特征和优势将变得更加明显。附图用来提供对本公开实施例的进一步理解，并且构成说明书的一部分，与本公开实施例一起用于解释本公开，并不构成对本公开的限制。在附图中，相同的参考标号通常代表相同部件或步骤。

图1是本公开一示例性实施例提供的页面富文本编辑器的扩展方法的流程示意图。

图2是本公开图1所示的实施例中步骤102的一个流程示意图。

图3是本公开图1所示的实施例中步骤104的一个流程示意图。

图4是本公开图1所示的实施例中步骤108的一个流程示意图。

图5是本公开另一示例性实施例提供的页面富文本编辑器的扩展方法的流程示意图。

图6是本公开一示例性实施例提供的页面富文本编辑器的扩展装置的结构示意图。

图7是本公开一示例性实施例提供的电子设备的结构图。

具体实施方式

下面，将参考附图详细地描述根据本公开的示例实施例。显然，所描述的实施例仅仅是本公开的一部分实施例，而不是本公开的全部实施例，应理解，本公开不受这里描述的示例实施例的限制。

应注意到：除非另外具体说明，否则在这些实施例中阐述的部件和步骤的相对布置、数字表达式和数值不限制本公开的范围。

本领域技术人员可以理解，本公开实施例中的“第一”、“第二”等术语仅用于区别不同步骤、设备或模块等，既不代表任何特定技术含义，也不表示它们之间的必然逻辑顺序。

还应理解，在本公开实施例中，“多个”可以指两个或两个以上，“至少一个”可以指一个、两个或两个以上。

还应理解，对于本公开实施例中提及的任一部件、数据或结构，在没有明确限定或者在前后文给出相反启示的情况下，一般可以理解为一个或多个。

另外，本公开中术语“和/或”，仅仅是一种描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。另外，本公开中字符“/”，一般表示前后关联对象是一种“或”的关系。本公开中所指数据可以包括文本、图像、视频等非结构化数据，也可以是结构化数据。

还应理解，本公开对各个实施例的描述着重强调各个实施例之间的不同之处，其相同或相似之处可以相互参考，为了简洁，不再一一赘述。

同时，应当明白，为了便于描述，附图中所示出的各个部分的尺寸并不是按照实际的比例关系绘制的。

以下对至少一个示例性实施例的描述实际上仅仅是说明性的，决不作为对本公开及其应用或使用的任何限制。

对于相关领域普通技术人员已知的技术、方法和设备可能不作详细讨论，但在适当情况下，所述技术、方法和设备应当被视为说明书的一部分。

应注意到：相似的标号和字母在下面的附图中表示类似项，因此，一旦某一项在一个附图中被定义，则在随后的附图中不需要对其进行进一步讨论。

本公开实施例可以应用于终端设备、计算机***、服务器等电子设备，其可与众多其它通用或专用计算***环境或配置一起操作。适于与终端设备、计算机***、服务器等电子设备一起使用的众所周知的终端设备、计算***、环境和/或配置的例子包括但不限于：个人计算机***、服务器计算机***、瘦客户机、厚客户机、手持或膝上设备、基于微处理器的***、机顶盒、可编程消费电子产品、网络个人电脑、小型计算机***、大型计算机***和包括上述任何***的分布式云计算技术环境，等等。

终端设备、计算机***、服务器等电子设备可以在由计算机***执行的计算机***可执行指令(诸如程序模块)的一般语境下描述。通常，程序模块可以包括例程、程序、目标程序、组件、逻辑、数据结构等等，它们执行特定的任务或者实现特定的抽象数据类型。计算机***/服务器可以在分布式云计算环境中实施，分布式云计算环境中，任务是由通过通信网络链接的远程处理设备执行的。在分布式云计算环境中，程序模块可以位于包括存储设备的本地或远程计算***存储介质上。

示例性方法

图1是本公开一示例性实施例提供的页面富文本编辑器的扩展方法的流程示意图。本实施例可应用在电子设备上，如图1所示，包括如下步骤：

步骤102，响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块。

其中，编辑模块独立于富文本编辑器，显示上位于富文本编辑器内部，但其操作不受富文本编辑器的逻辑控制。

步骤104，根据模块编辑指令在至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块。

在一实施例中，根据模块编辑指令可以单独实现对至少一个编辑模块进行编辑处理，该编辑处理可以包括对编辑模块新增、修改、删除数据或格式等处理；而在对编辑模块进行编辑的过程中，富文本编辑器完全不受影响；还可以对于富文本编辑器中的数据进行单独编辑，此时所有编辑模块也不受影响。

步骤106，导出富文本编辑器对应的第一数据和至少一个编辑后的编辑模块对应的至少一组第二数据。

可选地，第一数据和第二数据都可以为超文本标记语言(html)文本。

步骤108，基于第一数据和至少一组第二数据对页面进行渲染，得到渲染后的页面。

本实施例中，基于第一数据和至少一组第二数据共同对页面进行渲染，获得的渲染后的页面中不仅包括了富文本编辑器中的内容，还包括在编辑模块中的编辑内容。

基于本公开上述实施例提供的一种页面富文本编辑器的扩展方法，响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；根据模块编辑指令在至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；导出富文本编辑器对应的第一数据和至少一个编辑后的编辑模块对应的至少一组第二数据；基于第一数据和至少一组第二数据对页面进行渲染，得到渲染后的页面；本实施例通过对编辑模块进行独立编辑，实现了视觉上编辑富文本内部内容的效果，但其编辑过程不受限于富文本的控制，事件和内容改动处理比较灵活；实现在不需要了解当前编辑器实现的前提下，就可以开发新的富文本形式的插件。

如图2所示，在上述图1所示实施例的基础上，步骤102可包括如下步骤：

步骤1021，在富文本编辑器的数据中***与至少一个编辑模块大小对应的至少一个占位元素。

其中，每个占位元素对应一个编辑模块。

可选地，在富文本编辑器的工具栏增加操作按钮，通过点击按钮触发在文章内***编辑模块；点击操作按钮后，先在富文本编辑器内***至少一个不可编辑的占位元素，每个占位元素的大小与一个编辑模块的大小相同；可选地，占位元素可以使用简单的div标签占位。

步骤1022，将至少一个占位元素对应的编辑模块覆盖到占位元素对应的位置。

本实施例中，通过简单的占位元素将富文本编辑器内撑开至少一个编辑模块大小的空间，同时在富文本编辑器外部***编辑模块元素，通过占位元素的位置和长宽，将编辑模块元素覆盖在占位元素上方，实现视觉效果上编辑模块位于富文本编辑器内。

可选地，上述实施例中的步骤1022可以包括：

通过绝对定位将至少一个占位元素对应的编辑模块覆盖到占位元素对应的位置。

本实施例中，采用样式文件(CSS文件)对应的定位方式中的绝对定位(absolute)实现将编辑模块覆盖到占位元素对应的位置上，其中，绝对定位是指元素脱离文档流，直接相对于最近的已定位的祖先元素进行定位；通过采用绝对定位，实现了在视觉上呈现出编辑模块位于富文本编辑器内的效果，并且将占位元素完全覆盖。

如图3所示，在上述图1所示实施例的基础上，步骤104可包括如下步骤：

步骤1041，响应于监听得到对至少一个编辑模块的点击事件，调整至少一个编辑模块的状态为编辑状态，调整富文本编辑器的状态为只读状态。

可选地，点击事件可以是onClick事件。

步骤1042，控制至少一个编辑模块在编辑状态下，根据模块编辑指令接受编辑内容，得到编辑后的至少一个编辑模块。

本实施例中，监听到编辑模块的onClick事件，点击编辑模块时，将富文本编辑器置为只读状态，即不再处理富文本编辑区域内的事件，在将编辑模块置为编辑状态，同时设置光标至编辑模块内，此时只通过编辑模块接收编辑内容，在编辑模块内进行编辑操作，所有的操作支持程度取决于编辑模块本身的功能实现，不受富文本编辑器的约束和限制；实现独立的对编辑模块进行编辑，编辑过程不受富文本编辑器的影响，对编辑模块的内容处理更加灵活。

在一些可选的实施例中，本实施例提供的方法还可以包括：

响应于监听得到对至少一个编辑模块的失去焦点事件，调整至少一个编辑模块的状态为只读状态，调整富文本编辑器的状态为编辑状态；

控制富文本编辑器在编辑状态下，根据文本编辑指令接受编辑内容，得到编辑后的富文本编辑器。

本实施例中，通过监听，当监听到编辑模块的失去焦点事件(onBlur事件)，即点击非编辑模块区域时，将编辑模块置为只读状态，且富文本编辑器置为编辑状态，同时保存编辑模块内数据以便后续导出，此时，由于不对编辑模块进行处理，不再监听编辑模块的事件变化，设置光标至富文本编辑器内，此时可以在富文本编辑器内继续操作；本实施例通过监听事件，实现灵活的编辑切换，即可以在编辑模块中进行编辑，也可以在富文本编辑器中进行编辑，并且二者互斥，即同一时刻仅可以在一个编辑模块或富文本编辑器中进行编辑。

如图4所示，在上述图1所示实施例的基础上，步骤108可包括如下步骤：

步骤1081，确定第一数据中包括的至少一个占位元素对应的至少一个占位数据。

本实施例中，由于在编辑之前对富文本编辑器内增加了至少一个占位元素，并且编辑模块与富文本编辑器之间相互独立，因此，在第一数据中仅仅包括增加的占位元素对应的占位数据。

步骤1082，用至少一组第二数据替换掉至少一个占位数据，得到替换后的完整数据。

可选地，第一数据和第二数据可以为超文本标记语言(html)文本，html是一种标记语言，它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。html文本是由html命令组成的描述性文本，html命令可以说明文字，图形、动画、声音、表格、链接等。

步骤1083，基于完整数据对页面进行渲染，得到渲染后的页面。

本实施例中，为了实现渲染的页面达到被编辑的效果，需要将至少一个编辑模块编辑后的内容***到富文本编辑器中，本实施例通过将至少一个编辑模块对应的第二数据替换到其对应的占位数据中，使获得的完整数据相当于在富文本编辑器内完整了所有编辑的效果，进而基于该完整数据渲染得到的页面实现了显示所有编辑处理结果。数据保存时会存储对应的html代码，所以在保存时需要将占位的div再替换成编辑模块的html代码，确保文档在非编辑状态下，使用html代码直接渲染与编辑态的效果保持一致。

图5是本公开另一示例性实施例提供的页面富文本编辑器的扩展方法的流程示意图。本实施例可应用在电子设备上，如图5所示，包括如下步骤：

步骤502，响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块。

本实施例该步骤的技术实现和技术效果可参照图1提供的实施例中的步骤102，在此不再赘述。

步骤504，根据模块编辑指令在至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块。

本实施例该步骤的技术实现和技术效果可参照图1提供的实施例中的步骤104，在此不再赘述。

步骤506，导出富文本编辑器对应的第一数据和至少一个编辑后的编辑模块对应的至少一组第二数据。

本实施例该步骤的技术实现和技术效果可参照图1提供的实施例中的步骤106，在此不再赘述。

步骤508，基于第一数据和至少一组第二数据对页面进行渲染，得到渲染后的页面。

本实施例该步骤的技术实现和技术效果可参照图1提供的实施例中的步骤108，在此不再赘述。

步骤510，响应于接收对渲染后的页面进行编辑的第一更新指令。

在完成对页面的渲染后，本实施例已完成了一个完整的页面的渲染过程，在此基础上，如果还需要对已经渲染的页面进行更新操作(修改、删除、增加等操作)，会接收到第一更新指令，根据该第一更新指令获得完整数据。

步骤512，获得渲染后的页面对应的完整数据。

对于需要更新的页面，先获得该页面对应的完整数据，该数据中包括了富文本编辑器对应的第一数据和至少一个编辑模块对应的第二数据。

步骤514，基于完整数据，得到具有至少一个编辑模块的富文本编辑器。

可选地，可通过分解将富文本编辑器和至少一个编辑模块从完整数据中分离出来，以实现在更新编辑过程中实现富文本编辑器和编辑模块之间的相互独立编辑。

步骤516，根据第二更新指令对至少一个编辑模块和/或富文本编辑器进行更新处理。

在实现得到相对独立的富文本编辑器和至少一个编辑模块之后，在进行更新操作时，可单独对至少一个编辑模块进行处理，或独立对富文本编辑器进行处理，或通过事件切换实现对至少一个编辑模块和富文本编辑器分别进行处理，具体更新处理过程可参照上述实施例中根据事件监听进行编辑的过程；根据第二更新指令对已经渲染的页面进行具体更新操作(修改、删除、增加等操作)。

步骤518，导出更新后的至少一个编辑模块和/或富文本编辑器对应的数据，并基于更新后的数据对页面进行渲染，得到更新后的页面。

该步骤的渲染过程可参照上述实施例中步骤106和108中的渲染过程，在此不再赘述。

本实施例在需要对页面进行更新操作时，通过将页面对应的完整数据重新分解，再生成富文本编辑器和至少一个编辑模块，实现更加灵活的页面内容改动。

可选地，上述实施例中步骤514可以包括：

基于完整数据分解得到至少一组第二数据和第一数据；

将第一数据输入页面对应的富文本编辑器；

对至少一组第二数据依次进行渲染，得到至少一个编辑模块；

将至少一个编辑模块覆盖到富文本编辑器中至少一个占位元素对应的位置，得到具有至少一个编辑模块的富文本编辑器。

本实施例中，在更新编辑现有页面时，需要识别html代码中编辑模块对应代码(第二数据)片段，具体识别过程可根据在存储完整数据时在对应每个编辑模块的代码位置设置参数识别，在需要识别每个第二数据时，识别这些设置参数即可确定每个第二数据的位置，进而分解得到至少一个第二数据；再将原第二数据所在位置替换回占位元素，同时在上层覆盖可编辑的编辑模块，实现可以在富文本编辑器上覆盖的至少一个编辑模块内对其中内容进行更新。

可选地，基于完整数据分解得到至少一组第二数据和第一数据，包括：

根据至少一个编辑模块对应的设定参数，从完整数据中识别并提取至少一个编辑模块对应的至少一组第二数据；

将完整数据中对应至少一组第二数据的位置替换为至少一个占位元素，得到富文本编辑器对应的第一数据。

本实施例中，为了识别出在完整数据中的至少一组第二数据，可以在将第二数据与第一数据进行组合时，对每组第二数据中加入设定参数用于识别每个编辑模块的位置；并且，为了实现获得的富文本编辑器中还可以覆盖至少一个编辑模块，将完善数据中的至少一组第二数据提取后，将该对应位置替换为相应的占位元素，使基于替换后得第一数据生成的富文本编辑器中还预留有可被至少一个编辑模块覆盖的位置，实现如上述实施例中的在编辑模块中单独进行内容更新，实现在不需要了解当前编辑器实现的前提下，就可以通过编辑模块对页面内容进行更新。

本公开实施例提供的任一种页面富文本编辑器的扩展方法可以由任意适当的具有数据处理能力的设备执行，包括但不限于：终端设备和服务器等。或者，本公开实施例提供的任一种页面富文本编辑器的扩展方法可以由处理器执行，如处理器通过调用存储器存储的相应指令来执行本公开实施例提及的任一种页面富文本编辑器的扩展方法。下文不再赘述。

示例性装置

图6是本公开一示例性实施例提供的页面富文本编辑器的扩展装置的结构示意图。如图6所示，本实施例提供的装置包括：

编辑扩展模块61，用于响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块。

指令响应模块62，用于根据模块编辑指令在至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块。

数据导出模块63，用于导出富文本编辑器对应的第一数据和至少一个编辑后的编辑模块对应的至少一组第二数据。

页面渲染模块64，用于基于第一数据和至少一组第二数据对页面进行渲染，得到渲染后的页面。

基于本公开上述实施例提供的一种页面富文本编辑器的扩展装置，响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；根据模块编辑指令在至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；导出富文本编辑器对应的第一数据和至少一个编辑后的编辑模块对应的至少一组第二数据；基于第一数据和至少一组第二数据对页面进行渲染，得到渲染后的页面；本实施例通过对编辑模块进行独立编辑，实现了视觉上编辑富文本内部内容的效果，但其编辑过程不受限于富文本的控制，事件和内容改动处理比较灵活；实现在不需要了解当前编辑器实现的前提下，就可以开发新的富文本形式的插件。

可选地，编辑扩展模块，包括：

占位单元，用于在富文本编辑器的数据中***与至少一个编辑模块大小对应的至少一个占位元素；其中，每个占位元素对应一个编辑模块；

模块覆盖单元，用于将至少一个占位元素对应的编辑模块覆盖到占位元素对应的位置。

可选地，模块覆盖单元，具体用于通过绝对定位将至少一个占位元素对应的编辑模块覆盖到占位元素对应的位置。

可选地，指令响应模块，具体用于响应于监听得到对至少一个编辑模块的点击事件，调整至少一个编辑模块的状态为编辑状态，调整富文本编辑器的状态为只读状态；控制至少一个编辑模块在编辑状态下，根据模块编辑指令接受编辑内容，得到编辑后的至少一个编辑模块。

可选地，本实施例提供的装置还包括：

富文本编辑模块，用于响应于监听得到对至少一个编辑模块的失去焦点事件，调整至少一个编辑模块的状态为只读状态，调整富文本编辑器的状态为编辑状态；控制富文本编辑器在编辑状态下，根据文本编辑指令接受编辑内容，得到编辑后的富文本编辑器。

可选地，页面渲染模块，具体用于确定第一数据中包括的至少一个占位元素对应的至少一个占位数据；用至少一个第二数据替换掉至少一个占位数据，得到替换后的完整数据；基于完整数据对页面进行渲染，得到渲染后的页面。

可选地，本实施例提供的装置还包括：

更新指令模块，用于响应于接收对渲染后的页面进行编辑的第一更新指令；

数据获取模块，用于获得渲染后的页面对应的完整数据；

数据分解模块，用于基于完整数据，得到具有至少一个编辑模块的富文本编辑器；

更新处理模块，用于根据第二更新指令对至少一个编辑模块和/或富文本编辑器进行更新处理；

更新渲染模块，用于导出更新后的至少一个编辑模块和/或富文本编辑器对应的数据，并基于更新后的数据对页面进行渲染，得到更新后的页面。

可选地，数据分解模块，具体用于基于完整数据分解得到至少一组第二数据和第一数据；将第一数据输入页面对应的富文本编辑器；对至少一组第二数据依次进行渲染，得到至少一个编辑模块；将至少一个编辑模块覆盖到富文本编辑器中至少一个占位元素对应的位置，得到具有至少一个编辑模块的富文本编辑器。

可选地，数据分解模块在基于完整数据分解得到至少一组第二数据和第一数据时，用于根据至少一个编辑模块对应的设定参数，从完整数据中识别并提取至少一个编辑模块对应的至少一组第二数据；将完整数据中对应至少一组第二数据的位置替换为至少一个占位元素，得到富文本编辑器对应的第一数据。

示例性电子设备

下面，参考图7来描述根据本公开实施例的电子设备。该电子设备可以是第一设备100和第二设备200中的任一个或两者、或与它们独立的单机设备，该单机设备可以与第一设备和第二设备进行通信，以从它们接收所采集到的输入信号。

图7图示了根据本公开实施例的电子设备的框图。

如图7所示，电子设备70包括一个或多个处理器71和存储器72。

处理器71可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备70中的其他组件以执行期望的功能。

存储器72可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器71可以运行所述程序指令，以实现上文所述的本公开的各个实施例的页面富文本编辑器的扩展方法以及/或者其他期望的功能。在所述计算机可读存储介质中还可以存储诸如输入信号、信号分量、噪声分量等各种内容。

在一个示例中，电子设备70还可以包括：输入装置73和输出装置74，这些组件通过总线***和/或其他形式的连接机构(未示出)互连。

例如，在该电子设备是第一设备100或第二设备200时，该输入装置73可以是上述的麦克风或麦克风阵列，用于捕捉声源的输入信号。在该电子设备是单机设备时，该输入装置73可以是通信网络连接器，用于从第一设备100和第二设备200接收所采集的输入信号。

此外，该输入装置73还可以包括例如键盘、鼠标等等。

该输出装置74可以向外部输出各种信息，包括确定出的距离信息、方向信息等。该输出装置74可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图7中仅示出了该电子设备70中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备70还可以包括任何其他适当的组件。

示例性计算机程序产品和计算机可读存储介质

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面富文本编辑器的扩展方法中的步骤。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本说明书上述“示例性方法”部分中描述的根据本公开各种实施例的页面富文本编辑器的扩展方法中的步骤。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的***、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

以上结合具体实施例描述了本公开的基本原理，但是，需要指出的是，在本公开中提及的优点、优势、效果等仅是示例而非限制，不能认为这些优点、优势、效果等是本公开的各个实施例必须具备的。另外，上述公开的具体细节仅是为了示例的作用和便于理解的作用，而非限制，上述细节并不限制本公开为必须采用上述具体的细节来实现。

本说明书中各个实施例均采用递进的方式描述，每个实施例重点说明的都是与其它实施例的不同之处，各个实施例之间相同或相似的部分相互参见即可。对于***实施例而言，由于其与方法实施例基本对应，所以描述的比较简单，相关之处参见方法实施例的部分说明即可。

本公开中涉及的器件、装置、设备、***的方框图仅作为例示性的例子并且不意图要求或暗示必须按照方框图示出的方式进行连接、布置、配置。如本领域技术人员将认识到的，可以按任意方式连接、布置、配置这些器件、装置、设备、***。诸如“包括”、“包含”、“具有”等等的词语是开放性词汇，指“包括但不限于”，且可与其互换使用。这里所使用的词汇“或”和“和”指词汇“和/或”，且可与其互换使用，除非上下文明确指示不是如此。这里所使用的词汇“诸如”指词组“诸如但不限于”，且可与其互换使用。

可能以许多方式来实现本公开的方法和装置。例如，可通过软件、硬件、固件或者软件、硬件、固件的任何组合来实现本公开的方法和装置。用于所述方法的步骤的上述顺序仅是为了进行说明，本公开的方法的步骤不限于以上具体描述的顺序，除非以其它方式特别说明。此外，在一些实施例中，还可将本公开实施为记录在记录介质中的程序，这些程序包括用于实现根据本公开的方法的机器可读指令。因而，本公开还覆盖存储用于执行根据本公开的方法的程序的记录介质。

还需要指出的是，在本公开的装置、设备和方法中，各部件或各步骤是可以分解和/或重新组合的。这些分解和/或重新组合应视为本公开的等效方案。

提供所公开的方面的以上描述以使本领域的任何技术人员能够做出或者使用本公开。对这些方面的各种修改对于本领域技术人员而言是非常显而易见的，并且在此定义的一般原理可以应用于其他方面而不脱离本公开的范围。因此，本公开不意图被限制到在此示出的方面，而是按照与在此公开的原理和新颖的特征一致的最宽范围。

为了例示和描述的目的已经给出了以上描述。此外，此描述不意图将本公开的实施例限制到在此公开的形式。尽管以上已经讨论了多个示例方面和实施例，但是本领域技术人员将认识到其某些变型、修改、改变、添加和子组合。

Claims (10)

1.一种页面富文本编辑器的扩展方法，其特征在于，包括：

响应于接收到页面编辑指令，在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块；

根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块；

导出所述富文本编辑器对应的第一数据和所述至少一个编辑后的编辑模块对应的至少一组第二数据；

基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面。

2.根据权利要求1所述的方法，其特征在于，所述在页面对应的富文本编辑器中增加可独立编辑的至少一个编辑模块，包括：

在所述富文本编辑器的数据中***与所述至少一个编辑模块大小对应的至少一个占位元素；其中，每个所述占位元素对应一个编辑模块；

将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置。

3.根据权利要求2所述的方法，其特征在于，所述将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置，包括：

通过绝对定位将至少一个所述占位元素对应的所述编辑模块覆盖到所述占位元素对应的位置。

4.根据权利要求1-3任一所述的方法，其特征在于，所述根据模块编辑指令在所述至少一个编辑模块中进行编辑，得到编辑后的至少一个编辑模块，包括：

响应于监听得到对所述至少一个编辑模块的点击事件，调整所述至少一个编辑模块的状态为编辑状态，调整所述富文本编辑器的状态为只读状态；

控制所述至少一个编辑模块在编辑状态下，根据所述模块编辑指令接受编辑内容，得到编辑后的至少一个编辑模块。

5.根据权利要求1-4任一所述的方法，其特征在于，还包括：

响应于监听得到对所述至少一个编辑模块的失去焦点事件，调整所述至少一个编辑模块的状态为只读状态，调整所述富文本编辑器的状态为编辑状态；

控制所述富文本编辑器在编辑状态下，根据文本编辑指令接受编辑内容，得到编辑后的富文本编辑器。

6.根据权利要求1-5任一所述的方法，其特征在于，所述基于所述第一数据和所述至少一组第二数据对页面进行渲染，得到渲染后的页面，包括：

确定所述第一数据中包括的所述至少一个占位元素对应的至少一个占位数据；

用所述至少一个第二数据替换掉所述至少一个占位数据，得到替换后的完整数据；

基于所述完整数据对所述页面进行渲染，得到渲染后的页面。

7.根据权利要求1-6任一所述的方法，其特征在于，还包括：

响应于接收对所述渲染后的页面进行编辑的第一更新指令；

获得所述渲染后的页面对应的完整数据；

基于所述完整数据，得到具有至少一个编辑模块的富文本编辑器；

根据第二更新指令对所述至少一个编辑模块和/或所述富文本编辑器进行更新处理；

导出更新后的至少一个编辑模块和/或富文本编辑器对应的数据，并基于更新后的数据对页面进行渲染，得到更新后的页面。

8.根据权利要求7所述的方法，其特征在于，所述基于所述完整数据，得到具有至少一个编辑模块的富文本编辑器，包括：

基于所述完整数据分解得到至少一组第二数据和第一数据；

将所述第一数据输入所述页面对应的富文本编辑器；

对所述至少一组第二数据依次进行渲染，得到至少一个编辑模块；

将所述至少一个编辑模块覆盖到所述富文本编辑器中至少一个占位元素对应的位置，得到所述具有至少一个编辑模块的富文本编辑器。

9.根据权利要求8所述的方法，其特征在于，所述基于所述完整数据分解得到至少一组第二数据和第一数据，包括：

根据所述至少一个编辑模块对应的设定参数，从所述完整数据中识别并提取所述至少一个编辑模块对应的至少一组第二数据；

将所述完整数据中对应所述至少一组第二数据的位置替换为至少一个占位元素，得到所述富文本编辑器对应的第一数据。

10.一种计算机可读存储介质，其特征在于，所述存储介质存储有计算机程序，所述计算机程序用于执行上述权利要求1-9任一所述的页面富文本编辑器的扩展方法。

Images