CN110874523A - 富文本编辑器的内外交互方法及装置、处理器、存储介质 - Google Patents

富文本编辑器的内外交互方法及装置、处理器、存储介质 Download PDF

Info

Publication number
CN110874523A
CN110874523A CN201811000414.9A CN201811000414A CN110874523A CN 110874523 A CN110874523 A CN 110874523A CN 201811000414 A CN201811000414 A CN 201811000414A CN 110874523 A CN110874523 A CN 110874523A
Authority
CN
China
Prior art keywords
rich text
text editor
hook element
software module
content data
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Granted
Application number
CN201811000414.9A
Other languages
English (en)
Other versions
CN110874523B (zh
Inventor
张筑
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Beijing Gridsum Technology Co Ltd
Original Assignee
Beijing Gridsum Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Beijing Gridsum Technology Co Ltd filed Critical Beijing Gridsum Technology Co Ltd
Priority to CN201811000414.9A priority Critical patent/CN110874523B/zh
Publication of CN110874523A publication Critical patent/CN110874523A/zh
Application granted granted Critical
Publication of CN110874523B publication Critical patent/CN110874523B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • YGENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02DCLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Stored Programmes (AREA)
  • Document Processing Apparatus (AREA)

Abstract

本发明公开了一种富文本编辑器的内外交互方法及装置、处理器、存储介质,其中方法应用于电子设备,所述电子设备内还部署有富文本编辑器对应的软件模块;方法包括向所述富文本编辑器对应的软件模块中添加钩子元素;为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。本申请通过钩子元素作为富文本编辑器内外交互的纽带,从而实现富文本编辑器内部的指定区域与富文本编辑器外部的外部响应事件之间的交互,也即实现富文本编辑器的内外交互。

Description

富文本编辑器的内外交互方法及装置、处理器、存储介质
技术领域
本发明涉及网页技术领域,尤其涉及一种富文本编辑器内外交互方法及装置、处理器、存储介质。
背景技术
富文本编辑器(Rich Text Editor,RTE)也即所见即所得的文本编辑器。富文本编辑器不同于文本编辑器,富文本编辑器可以内嵌于浏览器中(或其它应用中),方便用户向富文本编辑器内编辑信息。
目前部署有富文本编辑器的电子设备中,富文本编辑器通常作为独立的软件模块使用,所以富文本编辑器仅能够在软件模块内实现内部操作。
随着富文本编辑器应用场景的广泛化,会面临富文本编辑器内部与富文本编辑器外部进行数据交互的需求,但是目前富文本编辑器不支持内部与外部进行数据交互,所以无法实现上述需求。
发明内容
鉴于上述问题,提出了本发明以便提供一种克服上述问题或者至少部分地解决上述问题的富文本编辑器的内外交互方法及装置、处理器、存储介质。
为了实现上述方案,采用如下技术特征:
一种富文本编辑器的内外交互方法,应用于电子设备,所述电子设备内还部署有富文本编辑器对应的软件模块;所述富文本编辑器的内外交互方法包括:
向所述富文本编辑器对应的软件模块中添加钩子元素;
为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
可选的,所述向所述富文本编辑器对应的软件模块中添加钩子元素,包括:
确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域;
在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。
可选的,所述为所述钩子元素绑定触发事件以及外部响应事件,包括:
监听所述富文本编辑器的编辑区进行内容初始化是否完成;
在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素;
对所述钩子元素绑定触发事件以及所述外部响应事件。
可选的,还包括设置一个暂存变量;
所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据。
可选的,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
在为所述钩子元素绑定触发事件以及外部响应事件之后,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
存储所述当前内容数据至所述暂存变量中。
可选的,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器对应软件模块中编辑区内容数据是否发生变化;
在监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
判断所述富文本编辑器的当前内容数据是否包含所述钩子元素;
若所述富文本编辑器的当前内容数据包含所述钩子元素,则将所述当前内容数据更新到所述暂存变量中,并进入调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器使用过程中内容是否发生变化的步骤。
可选的,还包括:
若所述富文本编辑器的当前内容数据不包含所述钩子元素,获取所述暂存变量中的已有内容数据,并将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据;
在所述富文本编辑器对应软件模块中查找所述钩子元素;
重新为所述钩子元素绑定触发事件以及所述外部响应事件。
一种富文本编辑器的内外交互装置,集成于电子设备,所述电子设备内还部署有富文本编辑器对应的软件模块;所述富文本编辑器的内外交互装置包括:
添加单元,用于向所述富文本编辑器对应的软件模块中添加钩子元素;
绑定单元,用于为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
执行单元,用于若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行富文本编辑器的内外交互方法。
一种存储介质,其上存储有程序,该程序被处理器执行时实现富文本编辑器的内外交互方法。
借由上述技术方案,本发明提供的富文本编辑器的内外交互方法具有下述有益效果:
本申请在富文本编辑器对应的软件模块中添加钩子元素,然后为钩子元素绑定触发事件以及外部响应事件;从而实现钩子元素被绑定的触发事件所触发后,执行钩子元素绑定的外部响应事件目的。
通过钩子元素作为富文本编辑器内外交互的纽带,从而实现富文本编辑器内部的指定区域与富文本编辑器外部的外部响应事件之间的交互,也即实现富文本编辑器的内外交互。
上述说明仅是本发明技术方案的概述,为了能够更清楚了解本发明的技术手段,而可依照说明书的内容予以实施,并且为了让本发明的上述和其它目的、特征和优点能够更明显易懂,以下特举本发明的具体实施方式。
附图说明
通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本发明的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:
图1示出了富文本编辑器的显示界面;
图2a-2b示出了电子设备的结构示意图;
图3示出了富文本编辑器的内外交互方法实施例一的流程图;
图4示出了富文本编辑器的内外交互方法实施例二的流程图;
图5示出了富文本编辑器的内外交互装置的结构示意图。
具体实施方式
下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。
术语解释:
钩子元素:本申请在指定区域对应的代码块内添加钩子元素,钩子元素为一特殊标识,通过查找特殊标识来识别钩子元素。
参见图1,富文本编辑器的显示界面包括两部分:一部分为用于提供字体格式、字体颜色等功能的功能区,一部分用于编辑文字、图片等数据的编辑区。功能区通常是固定不动的,编辑区可以被执行写入、删除、添加效果等编辑操作。
本申请提供了一种电子设备,参见图2a,电子设备内集成有执行软件模块100。参见图2b,为电子设备内集成富文本编辑器对应的软件模块200后的图示;富文本编辑器对应的软件模块200为独立的软件模块。
本申请提供一种富文本编辑器的内外交互方法的实施例一,应用于图2所示电子设备的执行软件模块100。
参见图3,富文本编辑器的内外交互方法可以包括以下步骤:
步骤S301:执行软件模块在电子设备内部署一容器,并在容器内生成富文本编辑器。
软件执行模块100在电子设备内部署一容器(Docker),并在容器内初始化富文本编辑器,在实际应用中,电子设备可以采用如下指令在容器中生成富文本编辑器:<div id=“ueditor”></div>。
富文本编辑器配置一些事件监听函数,比如ready函数用于监听富文本编辑器是否生成。软件执行模块100调用ready函数接口来确定富文本编辑器是否生成。
在富文本编辑器生成后,容器即为富文本编辑器。容器之内为富文本编辑器的内部,容器之外为富文本编辑器的外部。容器也即富文本编辑器对应的软件模块200,添加软件模块200后的电子设备,可以参见图2b所示。
向所述富文本编辑器对应的软件模块中添加钩子元素,可以采用下述步骤S302~S303实现。
步骤S302:软件执行模块100确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域。
在富文本编辑器的编辑区包括多个区域,用户可以预先在多个区域中确定一个区域,以将该区域作为后续绑定触发事件的指定区域。
在富文本编辑器对应的软件模块中每个区域采用一个代码块来实现,例如某个区域用来显示图片,则该区域对应的代码块则为用于显示图片的多行代码组成。
为了区分不同区域,可以采用区域标识来表示不同区域。软件执行模块100保存该指定区域的区域标识,以通过区域标识来确定绑定触发事件的指定区域。
步骤S303:在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。钩子元素可以为钩子函数或者标识,具体实现可以根据实际情况而定。
软件执行模块100控制富文本编辑器的编辑区进行内容初始化。在控制富文本编辑器进行初始化过程中,在富文本编辑器对应的软件模块中通过区域标识,来确定用于绑定触发事件的指定区域对应的代码块。
然后,在富文本编辑器对应的软件模块中,向指定区域对应的代码块中添加钩子元素(英文释义hook),例如在代码块内添加钩子元素id=“signature”。
为所述钩子元素绑定触发事件以及外部响应事件,本过程可以采用下述步骤S304~S306实现。
步骤S304:执行软件模块监听所述富文本编辑器的编辑区进行内容初始化是否完成。
在富文本编辑器的编辑区进行内容初始化完成后,执行软件模块100会接收到反馈消息,从而得知富文本编辑器的编辑区进行内容初始化完成。
步骤S305:执行软件模块在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素。
执行软件模块通过预先编写的脚本文件,来查找富文本编辑器对应软件模块中钩子元素。例如,执行软件模块通过预先编写的js脚本代码,在富文本编辑器的软件模块中查找钩子元素“signature”。
步骤S306:执行软件模块对所述钩子元素绑定触发事件以及所述外部响应事件。
执行软件模块在查找到钩子元素后,对富文本编辑器对应软件模块中的钩子元素绑定触发事件以及绑定外部响应事件,以便实现在钩子元素被触发事件所触发后,执行钩子元素绑定的外部响应事件,从而实现富文本编辑器的内外交互。
此处的外部响应事件为执行软件模块实现的功能函数。由于执行软件模块位于富文本编辑器对应的软件模块外部,所以执行软件模块中的功能函数便相当于富文本编辑器对应的外部响应事件。
其中触发事件可以包括:鼠标点击、悬浮、双击、三击等触发钩子元素的事件,可以理解的是,触发事件还可以包括事件,在此不再一一列举。
例如,延续上述举例在查找到“signature”后,对钩子元素“signature”绑定单击事件,以及,绑定富文本编辑器对应软件模块之外的功能函数function()。
下面给出本步骤一个原生js代码示例,以便于理解。
Function initEvent()
{
var iframe
=document.querySelector('#ueditor').querySelector('iframe').contentWindow iframe.document.getElementById('signature').addEventListener(event,function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码})
}
上述举例中加下划线的“signature”即为查找到的钩子元素,后面加下划线的addEventListener函数为对钩子元素绑定触发事件和外部响应事件的函数。
addEventListener函数包括两个部分event和function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码}。Event为需要对钩子元素绑定的触发事件,触发事件例如为点击(click)、鼠标滑动(mouseover)等等。
function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码}为外部响应事件。
若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。本过程可以采用步骤S307~S308来实现。
步骤S307:执行软件模块监听富文本编辑器对应软件模块中的钩子元素是否被触发事件所触发。
步骤S308:若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
例如,在富文本编辑器使用过程中,用户对于富文本编辑器的编辑区中钩子元素“signature”的指定区域执行触发事件后,则会触发钩子元素绑定的外部响应事件function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码},从而来实现富文本编辑器的内外交互。
通过上述实施例,可以得到下述有益效果:
本实施例中在富文本编辑器对应的软件模块中添加钩子元素,然后为钩子元素绑定触发事件以及外部响应事件;从而实现钩子元素被绑定的触发事件所触发后,执行钩子元素绑定的外部响应事件目的。
通过钩子元素作为富文本编辑器内外交互的纽带,从而实现富文本编辑器内部的指定区域与富文本编辑器外部的外部响应事件之间的交互,也即实现富文本编辑器的内外交互。
可以理解的是,富文本编辑器中编辑区的所有内容都是可以编辑的,在用户使用富文本编辑器过程中可能会误操作删除添加钩子元素的指定区域。在用于进行内外交互的钩子元素被删除后,便无法实现富文本编辑器的内外交互。
为此对实施例一进行优化,提供一种富文本编辑器的内外交互方法的实施例二,在实施例一基础上增加一个暂存变量,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据。
参见图4,富文本编辑器的内外交互方法可以包括以下步骤,其中,步骤S402,步骤S408~S409,步骤S412~S417为不同于实施例一的步骤,其余步骤与实施例一相同。
步骤S401:在电子设备内部署一容器,并在容器内生成富文本编辑器。
软件执行模块100在电子设备内部署一容器(Docker),并在容器内初始化富文本编辑器,在实际应用中,电子设备可以采用如下指令在容器中生成富文本编辑器:<div id=“ueditor”></div>。
富文本编辑器配置一些事件监听函数,比如ready函数用于监听富文本编辑器是否生成。软件执行模块100调用ready函数接口来确定富文本编辑器是否生成。
在富文本编辑器生成后容器即为富文本编辑器。容器之内为富文本编辑器的内部,容器之外为富文本编辑器的外部。容器也即富文本编辑器对应的软件模块200,添加软件模块200后的电子设备,可以参见图2b所示。
步骤S402:设置一个全局的暂存变量。
向所述富文本编辑器对应的软件模块中添加钩子元素,可以采用下述步骤S403~S404实现。
步骤S403:软件执行模块100确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域。
在富文本编辑器的编辑区包括多个区域,用户可以预先在多个区域中确定一个区域,以将该区域作为后续绑定触发事件的指定区域。
在富文本编辑器对应的软件模块中每个区域采用一个代码块来实现,例如某个区域用来显示图片,则该区域对应的代码块则为用于显示图片的多行代码组成。
为了区分不同区域,可以采用区域标识来表示不同区域。软件执行模块100保存该指定区域的区域标识,以通过区域标识来确定绑定触发事件的指定区域。
步骤S404:在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。
软件执行模块100控制富文本编辑器的编辑区进行内容初始化。在控制富文本编辑器进行初始化过程中,在富文本编辑器对应的软件模块中通过区域标识,来确定用于绑定触发事件的指定区域对应的代码块。
然后,在富文本编辑器对应的软件模块中,向指定区域对应的代码块中添加钩子元素(英文释义hook),例如在代码块内添加钩子元素id=“signature”。
为所述钩子元素绑定触发事件以及外部响应事件,本过程可以采用下述步骤S405~S407实现。
步骤S405:执行软件模块监听所述富文本编辑器的编辑区进行内容初始化是否完成。
在富文本编辑器的编辑区进行内容初始化完成后,执行软件模块100会接收到反馈消息,从而得知富文本编辑器的编辑区进行内容初始化完成。
步骤S406:执行软件模块在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素。
执行软件模块通过预先编写的脚本文件,来查找富文本编辑器对应软件模块中钩子元素。例如,执行软件模块通过预先编写的js脚本代码,在富文本编辑器的软件模块中查找钩子元素“signature”。
步骤S407:执行软件模块对所述钩子元素绑定触发事件以及所述外部响应事件。
执行软件模块在查找到钩子元素后,对富文本编辑器对应软件模块中的钩子元素绑定触发事件以及绑定外部响应事件,以便实现在钩子元素被触发事件所触发后,执行钩子元素绑定的外部响应事件,从而实现富文本编辑器的内外交互。
此处的外部响应事件为执行软件模块实现的功能函数。由于执行软件模块位于富文本编辑器对应的软件模块外部,所以执行软件模块中的功能函数便相当于富文本编辑器对应的外部响应事件。
其中触发事件可以包括:鼠标点击、悬浮、双击、三击等触发钩子元素的事件,可以理解的是,触发事件还可以包括事件,在此不再一一列举。
例如,延续上述举例在查找到“signature”后,对钩子元素“signature”绑定单击事件,以及,绑定富文本编辑器对应软件模块之外的功能函数function()。
下面给出本步骤一个原生js代码示例,以便于理解。
Function initEvent()
{
var iframe
=document.querySelector('#ueditor').querySelector('iframe').contentWindow iframe.document.getElementById('signature').addEventListener(event,function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码})
}
上述举例中加下划线的“signature”即为查找到的钩子元素,后面加下划线的addEventListener函数为对钩子元素绑定触发事件和外部响应事件的函数。
addEventListener函数包括两个部分eventfunction(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码}event需要对钩子元素绑定的触发事件(例如点击click、鼠标滑动mouseover等等)。function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码}为外部响应事件。
在为所述钩子元素绑定触发事件以及外部响应事件之后,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;存储所述当前内容数据至所述暂存变量中。本过程可以采用步骤S408~S409来实现。
步骤S408:执行软件模块在为所述钩子元素绑定触发事件以及外部响应事件之后,执行软件模块调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据。
富文本编辑器配置了一些事件监听函数,比如Contentchange函数用于监听富文本编辑器的编辑区的内容数据是否发生变化;getContent函数用于获取富文本编辑器的编辑区的内容数据,等等。
执行软件模块调用富文本编辑器对应软件模块中的getContent函数,来获取富文本编辑器的编辑区的当前内容数据。
步骤S409:执行软件模块存储所述当前内容数据至所述暂存变量中。
可以理解的是刚添加钩子元素后,当前内容数据必然是包含钩子元素的,所以先保存当前内容数据,以供在钩子元素被删除时使用。
若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。本过程可以采用步骤S410~S411来实现。
步骤S410:执行软件模块监听富文本编辑器对应软件模块中的钩子元素是否被触发事件所触发。
步骤S411:若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
例如,在富文本编辑器使用过程中,用户对于富文本编辑器的编辑区中钩子元素“signature”的指定区域执行触发事件后,则会触发钩子元素绑定的外部响应事件function(){//此处为富文本编辑器对应软件模块外部需要执行的软件代码},从而来实现富文本编辑器的内外交互。
与步骤S410与步骤S411并行执行的步骤S412~S417,以用来防止编辑区的钩子元素被删除。
步骤S412:调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器对应软件模块中编辑区内容数据是否发生变化。
富文本编辑器对应的软件代码中包括Contentchange函数,用于监听富文本编辑器的编辑区的内容数据是否发生变化。电子设备会调用Contentchange函数接口,以监听富文本编辑器的编辑区的内容数据是否发生变化。
步骤S413:在执行软件模块监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据。
执行软件模块在监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用富文本编辑器对应软件模块中的getContent函数,来获取富文本编辑器的编辑区的当前内容数据。
步骤S414:判断所述富文本编辑器的当前内容数据是否包含所述钩子元素。若是则进入步骤S415,若否则进入步骤S416。
步骤S415:若所述富文本编辑器的当前内容数据包含所述钩子元素,则将所述当前内容数据更新到所述暂存变量中,并进入步骤S412。
若所述富文本编辑器的当前内容数据包含所述钩子元素,则说明虽然编辑区的当前内容数据发生变化,但是钩子元素并未被删除,所以仍然可以实现富文本编辑器的内外交互,即当前内容数据为合法数据。
然后,将当前内容数据更新到暂存变量中,即,利用当前内容数据暂存变量中已有内容数据,以更新暂存变量的已有内容数据。
步骤S416:若所述富文本编辑器的当前内容数据不包含所述钩子元素,获取所述暂存变量中的已有内容数据,并将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据。
若所述富文本编辑器的当前内容数据不包含所述钩子元素,则说明钩子元素被删除。为了保证实现富文本编辑器的内外交互,重新对富文本编辑器的编辑区进行赋值。
由于暂存变量中的已有内容数据是包含钩子元素的,所以将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据,以使富文本编辑器的内容数据具有钩子元素。
步骤S417:执行软件模块在所述富文本编辑器对应软件模块中查找所述钩子元素,重新为所述钩子元素绑定触发事件以及所述外部响应事件。
在富文本编辑器的编辑区重新赋值后其绑定的触发事件外部响应事件已经丢失,需要重新为所述钩子元素绑定触发事件以及所述外部响应事件,以便仍然可以实现钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
通过上述实施例,可以得到下述有益效果:
本实施例中在富文本编辑器对应的软件模块中添加钩子元素,然后为钩子元素绑定触发事件以及外部响应事件;从而实现钩子元素被绑定的触发事件所触发后,执行钩子元素绑定的外部响应事件目的。
通过钩子元素作为富文本编辑器内外交互的纽带,从而实现富文本编辑器内部的指定区域与富文本编辑器外部的外部响应事件之间的交互,也即实现富文本编辑器的内外交互。
此外,本实施例增加了一个暂存变量,可以保证富文本编辑器内的钩子元素被误删除后还可以恢复钩子元素,并重新为钩子元素绑定触发事件和外部响应事件,从而可以保证富文本编辑器的内外交互。
与图4所示的一种富文本编辑器的内外交互方法对应的,本申请还提供一种富文本编辑器的内外交互装置,集成于电子设备内集成的执行软件模块,所述电子设备内还部署有富文本编辑器对应的软件模块。
参见图5,所述富文本编辑器的内外交互装置包括:
添加单元51,用于向所述富文本编辑器对应的软件模块中添加钩子元素;
绑定单元52,用于为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
执行单元53,用于若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
添加单元51具体包括:
确定区域单元511,用于确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域;
添加钩子单元512,用于在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。
绑定单元52具体包括:
监听单元521,用于监听所述富文本编辑器的编辑区进行内容初始化是否完成;
查找单元522,用于在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素;
绑定事件单元523,用于对所述钩子元素绑定触发事件以及所述外部响应事件。
设置单元53,用于设置一个暂存变量;所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据。
设置单元53使用暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,具体包括:
获取单元531,用于在为所述钩子元素绑定触发事件以及外部响应事件之后,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
存储单元532,用于存储所述当前内容数据至所述暂存变量中。
调用并监听单元54,用于调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器对应软件模块中编辑区内容数据是否发生变化;
获取单元55,还用于在监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
判断单元56,用于判断所述富文本编辑器的当前内容数据是否包含所述钩子元素;
更新单元57,用于若所述富文本编辑器的当前内容数据包含所述钩子元素,则将所述当前内容数据更新到所述暂存变量中,并进入调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器使用过程中内容是否发生变化的步骤。
替换单元58,用于若所述富文本编辑器的当前内容数据不包含所述钩子元素,获取所述暂存变量中的已有内容数据,并将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据;
查找单元522,用于在所述富文本编辑器对应软件模块中查找所述钩子元素;
绑定事件单元523,用于重新为所述钩子元素绑定触发事件以及所述外部响应事件。
所述富文本编辑器的内外交互装置包括处理器和存储器,上述添加单元51、绑定单元52、执行单元53、调用并监听单元54、获取单元55、判断单元56、更新单元57和替换单元58等均作为程序单元存储在存储器中,由处理器执行存储在存储器中的上述程序单元来实现相应的功能。
处理器中包含内核,由内核去存储器中调取相应的程序单元。内核可以设置一个或以上,通过调整内核参数来富文本编辑器的内外交互的目的。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM),存储器包括至少一个存储芯片。
本发明实施例提供了一种存储介质,其上存储有程序,该程序被处理器执行时实现所述富文本编辑器的内外交互方法。
本发明实施例提供了一种处理器,所述处理器用于运行程序,其中,所述程序运行时执行所述富文本编辑器的内外交互方法。
本发明实施例提供了一种设备,设备包括处理器、存储器及存储在存储器上并可在处理器上运行的程序,处理器执行程序时实现以下步骤:
向所述富文本编辑器对应的软件模块中添加钩子元素;
为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
可选的,所述向所述富文本编辑器对应的软件模块中添加钩子元素,包括:
确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域;
在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。
可选的,所述为所述钩子元素绑定触发事件以及外部响应事件,包括:
监听所述富文本编辑器的编辑区进行内容初始化是否完成;
在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素;
对所述钩子元素绑定触发事件以及所述外部响应事件。
可选的,还包括设置一个暂存变量;
所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据。
可选的,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
在为所述钩子元素绑定触发事件以及外部响应事件之后,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
存储所述当前内容数据至所述暂存变量中。
可选的,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器对应软件模块中编辑区内容数据是否发生变化;
在监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
判断所述富文本编辑器的当前内容数据是否包含所述钩子元素;
若所述富文本编辑器的当前内容数据包含所述钩子元素,则将所述当前内容数据更新到所述暂存变量中,并进入调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器使用过程中内容是否发生变化的步骤。
可选的,还包括:
若所述富文本编辑器的当前内容数据不包含所述钩子元素,获取所述暂存变量中的已有内容数据,并将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据;
在所述富文本编辑器对应软件模块中查找所述钩子元素;
重新为所述钩子元素绑定触发事件以及所述外部响应事件。
本文中的设备可以是服务器、PC、PAD、手机等。
本申请还提供了一种计算机程序产品,当在数据处理设备上执行时,适于执行初始化有如下方法步骤的程序:
向所述富文本编辑器对应的软件模块中添加钩子元素;
为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
可选的,所述向所述富文本编辑器对应的软件模块中添加钩子元素,包括:
确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域;
在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。
可选的,所述为所述钩子元素绑定触发事件以及外部响应事件,包括:
监听所述富文本编辑器的编辑区进行内容初始化是否完成;
在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素;
对所述钩子元素绑定触发事件以及所述外部响应事件。
可选的,还包括设置一个暂存变量;
所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据。
可选的,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
在为所述钩子元素绑定触发事件以及外部响应事件之后,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
存储所述当前内容数据至所述暂存变量中。
可选的,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器对应软件模块中编辑区内容数据是否发生变化;
在监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
判断所述富文本编辑器的当前内容数据是否包含所述钩子元素;
若所述富文本编辑器的当前内容数据包含所述钩子元素,则将所述当前内容数据更新到所述暂存变量中,并进入调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器使用过程中内容是否发生变化的步骤。
可选的,还包括:
若所述富文本编辑器的当前内容数据不包含所述钩子元素,获取所述暂存变量中的已有内容数据,并将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据;
在所述富文本编辑器对应软件模块中查找所述钩子元素;
重新为所述钩子元素绑定触发事件以及所述外部响应事件。
本领域内的技术人员应明白,本申请的实施例可提供为方法、***、或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
本申请是参照根据本申请实施例的方法、设备(***)、和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器,使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中,使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品,该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上,使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理,从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
在一个典型的配置中,计算设备包括一个或多个处理器(CPU)、输入/输出接口、网络接口和内存。
存储器可能包括计算机可读介质中的非永久性存储器,随机存取存储器(RAM)和/或非易失性内存等形式,如只读存储器(ROM)或闪存(flash RAM)。存储器是计算机可读介质的示例。
计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。计算机的存储介质的例子包括,但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带,磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质,可用于存储可以被计算设备访问的信息。按照本文中的界定,计算机可读介质不包括暂存电脑可读媒体(transitory media),如调制的数据信号和载波。
还需要说明的是,术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含,从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素,而且还包括没有明确列出的其他要素,或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下,由语句“包括一个……”限定的要素,并不排除在包括要素的过程、方法、商品或者设备中还存在另外的相同要素。
本领域技术人员应明白,本申请的实施例可提供为方法、***或计算机程序产品。因此,本申请可采用完全硬件实施例、完全软件实施例或结合软件和硬件方面的实施例的形式。而且,本申请可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、CD-ROM、光学存储器等)上实施的计算机程序产品的形式。
以上仅为本申请的实施例而已,并不用于限制本申请。对于本领域技术人员来说,本申请可以有各种更改和变化。凡在本申请的精神和原理之内所作的任何修改、等同替换、改进等,均应包含在本申请的权利要求范围之内。

Claims (10)

1.一种富文本编辑器的内外交互方法,其特征在于,应用于电子设备,所述电子设备内还部署有富文本编辑器对应的软件模块;所述富文本编辑器的内外交互方法包括:
向所述富文本编辑器对应的软件模块中添加钩子元素;
为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
2.如权利要求1所述的方法,其特征在于,所述向所述富文本编辑器对应的软件模块中添加钩子元素,包括:
确定所述富文本编辑器的编辑区中用于绑定触发事件的指定区域;
在对所述富文本编辑器的编辑区进行内容初始化过程中,向所述软件模块中所述指定区域对应的代码块内添加钩子元素。
3.如权利要求2所述的方法,其特征在于,所述为所述钩子元素绑定触发事件以及外部响应事件,包括:
监听所述富文本编辑器的编辑区进行内容初始化是否完成;
在监听到富文本编辑器的编辑区进行内容初始化完成后,在所述富文本编辑器对应的软件模块中查找所述钩子元素;
对所述钩子元素绑定触发事件以及所述外部响应事件。
4.如权利要求1所述的方法,其特征在于,还包括设置一个暂存变量;
所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据。
5.如权利要求4所述的方法,其特征在于,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
在为所述钩子元素绑定触发事件以及外部响应事件之后,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
存储所述当前内容数据至所述暂存变量中。
6.如权利要求4或5所述的方法,其特征在于,所述暂存变量用于存储所述富文本编辑器对应软件模块中包含所述钩子元素的内容数据,包括:
调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器对应软件模块中编辑区内容数据是否发生变化;
在监听到所述富文本编辑器对应软件模块中编辑区内容数据发生变化的情况下,调用所述富文本编辑器中获取内容接口,获取所述富文本编辑器对应软件模块中编辑区的当前内容数据;
判断所述富文本编辑器的当前内容数据是否包含所述钩子元素;
若所述富文本编辑器的当前内容数据包含所述钩子元素,则将所述当前内容数据更新到所述暂存变量中,并进入调用所述富文本编辑器中的内容变化监听接口,监听所述富文本编辑器使用过程中内容是否发生变化的步骤。
7.如权利要求6所述的方法,其特征在于,还包括:
若所述富文本编辑器的当前内容数据不包含所述钩子元素,获取所述暂存变量中的已有内容数据,并将所述富文本编辑器对应软件模块中的当前内容数据替换为所述已有内容数据;
在所述富文本编辑器对应软件模块中查找所述钩子元素;
重新为所述钩子元素绑定触发事件以及所述外部响应事件。
8.一种富文本编辑器的内外交互装置,其特征在于,集成于电子设备,所述电子设备内还部署有富文本编辑器对应的软件模块;所述富文本编辑器的内外交互装置包括:
添加单元,用于向所述富文本编辑器对应的软件模块中添加钩子元素;
绑定单元,用于为所述钩子元素绑定触发事件以及外部响应事件;其中,所述外部响应事件发生于所述富文本编辑器对应的软件模块之外;
执行单元,用于若所述钩子元素被绑定的触发事件所触发,则执行所述钩子元素绑定的所述外部响应事件。
9.一种处理器,其特征在于,所述处理器用于运行程序,其中,所述程序运行时执行如权利要求1-7任一项所述的富文本编辑器的内外交互方法。
10.一种存储介质,其上存储有程序,该程序被处理器执行时实现如权利要求1-7任一项所述的富文本编辑器的内外交互方法。
CN201811000414.9A 2018-08-30 2018-08-30 富文本编辑器的内外交互方法及装置、处理器、存储介质 Active CN110874523B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811000414.9A CN110874523B (zh) 2018-08-30 2018-08-30 富文本编辑器的内外交互方法及装置、处理器、存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811000414.9A CN110874523B (zh) 2018-08-30 2018-08-30 富文本编辑器的内外交互方法及装置、处理器、存储介质

Publications (2)

Publication Number Publication Date
CN110874523A true CN110874523A (zh) 2020-03-10
CN110874523B CN110874523B (zh) 2024-02-13

Family

ID=69714419

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811000414.9A Active CN110874523B (zh) 2018-08-30 2018-08-30 富文本编辑器的内外交互方法及装置、处理器、存储介质

Country Status (1)

Country Link
CN (1) CN110874523B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101410798A (zh) * 2006-04-27 2009-04-15 国际商业机器公司 用于生成应用数据编辑器的方法和***
US20090259949A1 (en) * 2008-04-15 2009-10-15 Microsoft Corporation Cross-browser rich text editing via a hybrid client-side model
CN103577427A (zh) * 2012-07-25 2014-02-12 ***通信集团公司 基于浏览器内核的网页爬取方法、装置及包含该装置的浏览器
CN108089847A (zh) * 2017-12-14 2018-05-29 易知成都数据服务有限公司 一种基于ElementUI和UEditor富文本的组件开发方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101410798A (zh) * 2006-04-27 2009-04-15 国际商业机器公司 用于生成应用数据编辑器的方法和***
US20090259949A1 (en) * 2008-04-15 2009-10-15 Microsoft Corporation Cross-browser rich text editing via a hybrid client-side model
CN103577427A (zh) * 2012-07-25 2014-02-12 ***通信集团公司 基于浏览器内核的网页爬取方法、装置及包含该装置的浏览器
CN108089847A (zh) * 2017-12-14 2018-05-29 易知成都数据服务有限公司 一种基于ElementUI和UEditor富文本的组件开发方法

Also Published As

Publication number Publication date
CN110874523B (zh) 2024-02-13

Similar Documents

Publication Publication Date Title
CN110058856B (zh) 页面配置方法及装置
US10699061B2 (en) Application page quick access
CN106933887B (zh) 一种数据可视化方法及装置
KR20160128940A (ko) 사용자 폼 인터페이스의 자동 생성 방법 및 시스템
CN111796823A (zh) 页面更新、页面展示的方法、装置及页面维护***
CN107015903B (zh) 一种界面测试程序的生成方法、装置及电子设备
CN107479868B (zh) 一种界面加载方法、装置及设备
CN109857964B (zh) 一种页面操作的热力图绘制方法、装置、存储介质及处理器
CN110825600B (zh) 一种页面信息处理方法、服务器和页面展示装置
CN106648567B (zh) 数据获取方法及装置
CN108874379B (zh) 页面的处理方法及装置
CN110020370B (zh) 在客户端应用中实现动画的方法、装置及动画脚本的框架
CN109977317B (zh) 数据查询方法及装置
CN111142990A (zh) 一种微信小程序页面展示方法、装置、及存储介质
CN111538667A (zh) 一种页面测试的方法及装置
CN110955813A (zh) 一种数据爬取方法及装置
CN112560403A (zh) 文本的处理方法及装置、电子设备
CN112579066A (zh) 图表展示方法、装置、存储介质及设备
CN113485746B (zh) 应用程序接口文档的生成方法及装置
CN110874523B (zh) 富文本编辑器的内外交互方法及装置、处理器、存储介质
CN112346761B (zh) 前端资源上线方法、设备、***及存储介质
CN110968500A (zh) 一种测试用例的执行方法及装置
CN110968991A (zh) 一种文字的编辑方法及相关装置
CN114254229A (zh) 网页渲染方法及装置
CN112579938A (zh) 一种页面加载方法、装置、存储介质及电子设备

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant