CN110516028A - 一种基于react实现复杂编辑器的方法及装置 - Google Patents
一种基于react实现复杂编辑器的方法及装置 Download PDFInfo
- Publication number
- CN110516028A CN110516028A CN201910691959.7A CN201910691959A CN110516028A CN 110516028 A CN110516028 A CN 110516028A CN 201910691959 A CN201910691959 A CN 201910691959A CN 110516028 A CN110516028 A CN 110516028A
- Authority
- CN
- China
- Prior art keywords
- complex
- elements
- text
- rendering
- array
- 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
Links
- 238000000034 method Methods 0.000 title claims abstract description 136
- 238000009877 rendering Methods 0.000 claims abstract description 102
- 238000013499 data model Methods 0.000 claims abstract description 71
- 238000003780 insertion Methods 0.000 claims description 58
- 230000037431 insertion Effects 0.000 claims description 58
- 230000002452 interceptive effect Effects 0.000 claims description 25
- 238000004590 computer program Methods 0.000 claims description 8
- 230000003993 interaction Effects 0.000 abstract description 7
- 238000012423 maintenance Methods 0.000 abstract 1
- 230000006870 function Effects 0.000 description 15
- 238000004891 communication Methods 0.000 description 11
- 238000010586 diagram Methods 0.000 description 4
- 238000012545 processing Methods 0.000 description 4
- 230000008859 change Effects 0.000 description 2
- 230000003287 optical effect Effects 0.000 description 2
- 230000005540 biological transmission Effects 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/30—Information retrieval; Database structures therefor; File system structures therefor of unstructured textual data
- G06F16/31—Indexing; Data structures therefor; Storage structures
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/37—Compiler construction; Parser generation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Data Mining & Analysis (AREA)
- Databases & Information Systems (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本发明实施例提供一种基于react实现复杂编辑器的方法及装置。所述方法包括获取与非复杂元素与复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括对应的渲染方法；对每个非复杂元素和复杂元素根据对应的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，本发明实施例通过与非复杂元素和复杂元素对应的数据模型，以及各自的渲染方法，将数组变量中的非复杂元素和复杂元素通过渲染后显示，以使所述复杂元素维持交互状态，从而使复杂编辑器能够实现对非复杂元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
Description
技术领域
本发明涉及数据处理技术领域，尤其涉及一种基于react实现复杂编辑器的方法及装置。
背景技术
复杂(富文本)编辑器，它提供类似于Microsoft Word的编辑功能，容易被不会编写HTML的用户并需要设置各种文本格式的用户所喜爱，它的应用也越来越广泛。富文本编辑是前端领域单个交互最复杂的场景之一，需要支持文本和复杂元素的混合编辑。
然而现有技术对于文本和复杂元素的混合编辑功能有限无法满足需求。
发明内容
本发明实施例提供一种基于react实现复杂编辑器的方法及装置，用以解决现有技术在采用react实现的复杂编辑器功能有限无法满足需求。
第一方面，本发明实施例提供了一种基于react实现复杂编辑器的方法，包括：
获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；
按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
进一步地，所述非复杂元素为文本元素、图片元素或超链接元素的一项或者多项；相应地，所述可选择信息为文字信息、图片信息或超链接信息的一项或者多项。
进一步地，所述方法还包括：
获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
进一步地，所述文本元素的数据模型中的渲染方法还包括input元素渲染方法；相应地，所述方法还包括：
对所述选定的文本元素采用input元素渲染方法，将所述文本元素显示为可编辑状态，所述可编辑状态具体为：将所述文本元素的文字信息置于输入框中进行编辑。
进一步地，所述方法还包括：
若所述选定的文本元素被取消选定，则对所述输入框执行插入操作，所述插入操作具体为：若所述输入框不为空，则将所述输入框中的文字信息分割组成至少一个文本元素，并根据所述插入值更新所述数组变量。
进一步地，所述方法还包括：
若对任一复杂元素进行选定，则相当于选定与所述复杂元素相邻的一个空的文本元素。
第二方面，本发明实施例提供了一种基于react实现复杂编辑器的装置，包括：
信息获取模块，用于获取预设的分别与非复杂元素与复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；
元素渲染模块，用于按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
进一步地，所述非复杂元素为文本元素、图片元素或超链接元素，相应地，所述装置还包括：
元素选定模块，用于获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
数组更新模块，用于若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
第三方面，本发明实施例还提供了一种电子设备，包括：
处理器、存储器、通信接口和通信总线；其中，
所述处理器、存储器、通信接口通过所述通信总线完成相互间的通信；
所述通信接口用于该电子设备的通信设备之间的信息传输；
所述存储器存储有可被所述处理器执行的计算机程序指令，所述处理器调用所述程序指令能够执行如下方法：
获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；
按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
第四方面，本发明实施例还提供了一种非暂态计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时实现如下方法：
获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；
按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
本发明实施例提供的基于react实现复杂编辑器的方法及装置，通过预先编辑的与非复杂元素和复杂元素对应的数据模型，以及数据模型中的各自的渲染方法，将数组变量中的所有非复杂元素和复杂元素通过对应的渲染方法时行渲染后显示，其中，对所述复杂元素采用复杂元素渲染方法，以使所述复杂元素维持交互状态，从而使复杂编辑器能够实现对非复杂元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
附图说明
为了更清楚地说明本发明实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1为本发明实施例的基于react实现复杂编辑器的方法流程图；
图2为为本发明实施例的基于react实现复杂编辑器的装置的结构示意图；
图3示例了一种电子设备的实体结构示意图。
具体实施方式
为使本发明实施例的目的、技术方案和优点更加清楚，下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
图1为本发明实施例的基于react实现复杂编辑器的方法流程图，如图1所示，所述方法包括：
步骤S01、获取预设的分别与非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法。
由于现有的react不支持进行交互信息处理的复杂元素，为此，需要所述复杂编辑器先基于react，声明了分别用于构建与预设种类的非复杂元素和复杂元素的一一对应的数据模型model，且所述数据模型均包含有渲染方法render和提交方法toString。所述render方法具体用于渲染，且不同的数据模型分别设定了各自的渲染方法。其中，与所述文本元素对应的render方法包括span元素渲染，而与所述复杂元素对应的render方法包括复杂元素渲染。
所述toString方法则用于在编辑完成所有的内容后，将最后得到的内容进行提交从而进行数据处理。例如，若所述复杂编辑器用于编辑发送的短信内容，则在编辑完成后，调用toString方法将最后的内容提交，用于发送短信。
所述复杂编辑器再声明一个数组变量contentListData，该数组变量用于记录所述复杂编辑器上需要显示的所有非复杂元素和复杂元素，且所述数组变量中所有非复杂元素和复杂元素的排列顺序与显示时的前后位置关系相同。
步骤S02、按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
所述复杂编辑器，将实时监控所述数组变量的更新情况，将其中记录的所有非复杂元素和复杂元素，分别采用对应的render方法进行渲染，并根据各自在数组变量中的排序，在所述复杂编辑器中显示。
所述文本元素采用对应的span元素渲染方法，从而将所述文本元素包含的文字信息仅以展示的方式显示到复杂编辑器中。
所述复杂元素则采用对应的复杂元素渲染方法，从而将所述复杂元素包含的至少一组可选择信息显示到复杂编辑器中，且每组可选择信息维持交互状态。从而使用户能够在所述复杂编辑器中通过与每组可选择信息对应的选择列表，来改变该组可选择信息，具体地，用户可通过点选该组可选择信息来显示对应的选择列表，例如，以下拉选择框的方式，然后在所述选择列表中选择需要的可选择信息，从而可根据选择的可选择信息在所述数组变量中更新所述复杂元素。
进一步地，所述非复杂元素为文本元素、图片元素或超链接元素的一项或者多项；相应地，所述可选择信息为文字信息、图片信息或超链接信息的一项或者多项。
所述非复杂元素的种类可根据实际的需要进行设定，具体可以为文本元素、图片元素或超链接元素等，在此不作具体地限定。每一种非复杂元素均存在对应的数据模型，并且对于不同种类的非复杂元素根据实际的需要会设定对应的渲染方法。但为了简便起见，在下面的实施例中均以文本元素为例进行举例说明。
相对应地，所述复杂元素的选择列表中包含的可选择信息也可根据实际的需要进行设定，可以为文字信息、图片信息和超链接信息等，但为了简便起见，在下面的实施例中均以文字信息为例进行举例说明。
此时，所述复杂编辑器将对更新后的复杂元素重新进行复杂元素渲染，将选择的可选择信息显示到复杂编辑器中。
本发明实施例通过预先编辑的与非复杂元素和复杂元素对应的数据模型，以及数据模型中的各自的渲染方法，将数组变量中的所有非复杂元素和复杂元素通过对应的渲染方法时行渲染后显示，其中，对所述复杂元素采用复杂元素渲染方法，以使所述复杂元素维持交互状态，从而使复杂编辑器能够实现对非复杂元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
基于上述实施例，进一步地，所述方法还包括：
获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
为了能够让复杂编辑器在数组变量中定位到每个非复杂元素或复杂元素，根据数组变量中所有非复杂元素和复杂元素的排列顺序，将排序的序号作为每个非复杂元素或复杂元素的索引值。
若选定任一非复杂元素，则将该非复杂元素的索引值作为插入值。具体选定的方式，可以通过光标的位置来实现，若光标位于任一非复杂元素，则该非复杂元素即为被选定状态。
所述复杂编辑器还获取到用户根据自身的需要基于复杂元素的数据模型预先编写的至少一个待插入复杂元素，且每个待插入复杂元素均包含有对应的选择列表，例如：业务人员姓名、业务人员电话、待办信息、报单信息等。
用户可根据自身的需要选择将任一待插入复杂元素增加到所述复杂编辑器已显示的内容中。所述复杂编辑器根据所述插入值，将选择的待插入复杂元素作为新的复杂元素加入到所述数组变量中，具体可将新的复杂元素添加到选定的本文元素后面。同时，在所述数组变量中，在所述新的复杂元素前、后各添加一个空的文本元素。每个新加入的元素将得到对应的索引值，而在所述数组变量中位于新加入的元素后的元素也将更新对应的索引值。
例如，数组变量A包含的所有元素为{a1,a2,…,ai-1,ai,ai+1,…,an-1,an}，当前光标位于非复杂元素ai，则所述插入值为i，此时，用户选择了待插入复杂元素b，所述数组变量A更新后变为{a1,a2,…,ai-1,ai,“空”,b,“空”,ai+1,…,an-1,an}，其中，所述“空”为空的文本元素。此时，所述b对应的索引值i+2，而ai+1的索引值为i+4。
此时，所述复杂编辑器将根据更新后的数组变量对其中所有的非复杂元素和复杂元素重新进行相应地渲染，或者对发生过变动以及新增的非复杂元素和复杂元素进行相应的渲染。
可见，在所述数组变量中，任一复杂元素前、后，都将存在一个空的文本元素，且与所述复杂元素相邻的两个空的文本元素在数组变量中存在的时间也复杂元素一致，即只要所述复杂元素未被删除，相邻的两个空的文本元素也必将存在，一旦所述复杂元素被删除，则相邻的两个空的文本元素也将同时被删除。当然，根据实际的需要，也可以选择在所述复杂元素被删除后不删除所述空的文本元素。
本发明实施例通过获取到的待插入复杂元素和插入值，在选择任一待插入复杂元素中，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量的插入值后，并在所述新的复杂元素前后相邻位置增加空的文本元素，从而使复杂编辑器能够实现对非复杂元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
基于上述实施例，进一步地，所述文本元素的数据模型中的渲染方法还包括input元素渲染方法；相应地，所述方法还包括：
对所述选定的文本元素采用input元素渲染方法，将所述文本元素显示为可编辑状态，所述可编辑状态具体为：将所述文本元素的文字信息置于输入框中进行编辑。
为了能够让所述文本元素在复杂编辑器上实现可编辑的功能，所述文本元素的数据模型中还设定了input元素渲染方法，即所述文本元素的数据模型中的render方法中包括有span元素渲染方法和input元素渲染方法。
所述复杂编辑器根据获取到的插入值，在数组变量中定位到选定的文本元素，并对该选定的文本元素采用input元素渲染方法，使选定的文本元素在所述复杂编译器上显示为可编辑状态。
所述可编辑状态具体表现为，在所述文本元素的位置出现一个输入框，且所述输入框的初始状态包含有所述文本元素中的文字信息，用户可在该输入框中进行文字编辑。
进一步地，所述方法还包括：
若所述选定的文本元素被取消选定，则对所述输入框执行插入操作，所述插入操作具体为：若所述输入框不为空，则将所述输入框中的文字信息分割组成至少一个文本元素，并根据所述插入值更新所述数组变量。
若所述选定的文本元素被取消选定，以光标为例，即处于编辑状态的输入框中的光标移出了所述输入框，具体包括，通过选择其它的文本元素，从而使光标移动到其它的文本元素，或者通过左右移动将所述光标移出所述输入框，或者将所述输入框中的文字信息全部删除，则对所述输入框执行插入操作：
若所述输入框为空，即所述输入框中的文字信息被全部删除，此时，将根据插入值，将对应的文本元素从所述数组变量中删除。
若所述输入框不为空，则需要对该输入框中的文字信息进行分割，组成至少一个文本元素，然后将组成的所有文本元素在所述插入值的位置加入到所述数组变量中，并更新所述数组元素中各个元素的索引值。
例如，若数组变量A包含的所有元素为{a1,a2,…,ai-1,ai,ai+1,…,an-1,an}，当前光标位于文本元素ai，则所述ai处于可编辑状态，由于所述ai对应的索引值为i，则得到的插入值为i，所述ai的原包含的文字信息为“1”，经过编辑后变为“123”，在光标移出所述输入框后，将输入框中的文字信息“123”进行分割，可以组成文本元素ai＝“1”,ai1＝“2”，ai2＝“3”，则更新后得到的数组变量A＝{a1,a2,…ai-1,ai,ai1,ai2,ai+1,…,an-1,an}。
本发明实施例根据当前光标的插入值，将对与插入值对应的文本元素采用input元素渲染方法，将该文本元素显示为可编辑状态，在完成对输入框的编辑后执行插入操作，将输入框中的文字信息分割为多个文本元素，并根据所述插入值更新所述数组变量，从而使复杂编辑器能够实现对文本元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
基于上述实施例，进一步地，所述方法还包括：
若选定任一复杂元素，则相当于选定与所述复杂元素相邻的一个空的文本元素。
由上述实施例可知，由于每个复杂元素均处于交互状态，因此，可随时通过在对应的文字列表中选择来变更其包含的文字信息，从而达到对复杂元素的编辑和更新。
因此，无需对复杂元素进行选定，当任一复杂元素被选定时，可直接默认为选定的是与该复杂元素相邻的其中一个空的文本元素，此时，得到的插入值也将是该空的文本元素对应的索引值，从而该选定的空的文本元素将采用input元素渲染方法显示为可编辑状态。
例如，当前的光标位于所述复杂元素前的空的文本元素，当前的插入值为k，在光标后移一位时，所述光标将直接跳过所述复杂元素，使所述光标位于所述复杂元素后的空的文本元素，此时，得到的插入值为k+2。
位于所述复杂元素前、后的空的文本元素在被选定时，虽然处于可编辑的状态，但由于该空的文本元素无法被独立删除，因此，在对输入框执行插入操作时，默认至少存在一个空的文本元素位于所述复杂元素相邻位置。例如，若编辑后的输入框中的文字信息为“123”，则分割后得到的文本元素分别为“空”“1”“2”“3”。而若输入框中所有文字信息被删除，也不会将原来空的文本元素从所述数组变量中删除。
本发明实施例通过在对复杂元素进行选定时，直接选定与所述复杂元素相邻的一个空的文本元素，从而使复杂编辑器能够实现对文本元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
图2为为本发明实施例的基于react实现复杂编辑器的装置的结构示意图，如图2所示，所述装置包括：信息获取模块10和元素渲染模块11，其中，
所述信息获取模块10用于获取预设的分别与非复杂元素与复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；元素渲染模块11用于按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。具体地：
由于现有的react不支持进行交互信息处理的复杂元素，为此，需要信息获取模块10获取先基于react声明的分别用于构建与预设种类的非复杂元素和复杂元素一一对应的数据模型model，且所述数据模型均包含有渲染方法render和提交方法toString。
进一步地，所述非复杂元素为文本元素、图片元素或超链接元素。
其中，所述非复杂元素的种类可根据实际的需要进行设定，具体可以为文本元素、图片元素或超链接元素等，在此不作具体地限定。但为了简便起见，在下面的实施例中均以文本元素为例进行举例说明。
所述render方法具体用于渲染，且不同的数据模型分别设定了各自的渲染方法。其中，与所述文本元素对应的render方法包括span元素渲染，而与所述复杂元素对应的render方法包括复杂元素渲染。
所述toString方法则用于在编辑完成所有的内容后，将最后得到的内容进行提交从而进行数据处理。例如，若所述复杂编辑器用于编辑发送的短信内容，则在编辑完成后，调用toString方法将最后的内容提交，用于发送短信。
所述信息获取模块还获取到预先声明一个数组变量contentListData，该数组变量用于记录需要显示的所有非复杂元素和复杂元素，且所述数组变量中所有非复杂元素和复杂元素的排列顺序与显示时的前后位置关系相同。
所述元素渲染模块11将实时监控所述信息获取模块10获取到的所述数组变量的更新情况，将其中记录的所有非复杂元素和复杂元素，分别调用所述信息获取模块10获取到的对应的render方法进行渲染，并根据各自在数组变量中的排序，进行显示。
所述元素渲染模块11对所述文本元素采用对应的span元素渲染方法，从而将所述文本元素包含的文字信息仅以展示的方式进行显示。
所述元素渲染模块11对所述复杂元素则采用对应的复杂元素渲染方法，从而将所述复杂元素包含的至少一组可选择信息进行显示，且每组可选择信息维持交互状态。从而使用户能够通过与每组可选择信息对应的选择列表，来改变该组可选择信息，具体地，用户可通过点选该组可选择信息来显示对应的选择列表，例如，以下拉选择框的方式，然后在所述选择列表中选择需要的可选择信息，从而可根据选择的可选择信息在所述数组变量中更新所述复杂元素。所述可选择信息可根据实际的需要进行设定，可以为文字信息、图片信息和超链接信息等，为了简便起见，在下面的实施例中均以文字信息为例进行举例说明。
此时，所述元素渲染模块11将对更新后的复杂元素重新进行复杂元素渲染，将选择的可选择信息进行显示。
本发明实施例提供的装置用于执行上述方法，其功能具体参考上述方法实施例，其具体方法流程在此处不再赘述。
本发明实施例通过预先编辑的与非复杂元素和复杂元素对应的数据模型，以及数据模型中的各自的渲染方法，将数组变量中的所有非复杂元素和复杂元素通过对应的渲染方法时行渲染后显示，其中，对所述复杂元素采用复杂元素渲染方法，以使所述复杂元素维持交互状态，从而使复杂编辑器能够实现对非复杂元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
基于上述实施例，进一步地，所述装置还包括：元素选定模块和数组更新模块，其中，
所述元素选定模块用于获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；所述数组更新模块用于若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。具体地：
为了能够在数组变量中定位到每个非复杂元素或复杂元素，根据数组变量中所有非复杂元素和复杂元素的排列顺序，将排序的序号作为每个非复杂元素或复杂元素的索引值。
若选定任一非复杂元素，则所述元素选定模块将该非复杂元素的索引值作为插入值。具体选定的方式，可以通过光标的位置来实现，若光标位于任一非复杂元素，则该非复杂元素即为被选定状态。
所述元素选定模块还获取到用户根据自身的需要基于复杂元素的数据模型预先编写的至少一个待插入复杂元素，且每个待插入复杂元素均包含有对应的选择列表。
用户可根据自身的需要选择将任一待插入复杂元素增加后，所述元素待定模块将选择的待插入复杂元素发送给数组更新模块。所述数组更新模块根据由元素选定模块获取的所述插入值，将接收到的待插入复杂元素作为新的复杂元素加入到所述数组变量中，具体可将新的复杂元素添加到选定的本文元素后面。同时，所述数组更新模块在所述数组变量中，在所述新的复杂元素前、后各添加一个空的文本元素。每个新加入的元素将得到对应的索引值，而在所述数组变量中位于新加入的元素后的元素也将更新对应的索引值。
此时，所述元素渲染模块将根据更新后的数组变量对其中所有的非复杂元素和复杂元素重新进行相应地渲染，或者对发生过变动以及新增的非复杂元素和复杂元素进行相应的渲染。
可见，在所述数组变量中，任一复杂元素前、后，都将存在一个空的文本元素，且与所述复杂元素相邻的两个空的文本元素在数组变量中存在的时间也复杂元素一致，即只要所述复杂元素未被删除，相邻的两个空的文本元素也必将存在，一旦所述复杂元素被删除，则相邻的两个空的文本元素也将同时被删除。当然，根据实际的需要，也可以选择在所述复杂元素被删除后不删除所述空的文本元素。
本发明实施例提供的装置用于执行上述方法，其功能具体参考上述方法实施例，其具体方法流程在此处不再赘述。
本发明实施例通过获取到的待插入复杂元素和插入值，在选择任一待插入复杂元素中，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量的插入值后，并在所述新的复杂元素前后相邻位置增加空的文本元素，从而使复杂编辑器能够实现对非复杂元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
基于上述实施例，进一步地，所述文本元素的数据模型中的渲染方法还包括input元素渲染方法；相应地，所述元素渲染模块还用于，对所述选定的文本元素采用input元素渲染方法，将所述文本元素显示为可编辑状态，所述可编辑状态具体为：将所述文本元素的文字信息置于输入框中进行编辑。
为了能够让所述文本元素在复杂编辑器上实现可编辑的功能，所述文本元素的数据模型中还设定了input元素渲染方法，即所述信息获取模块获取到的所述文本元素的数据模型中的render方法中包括有span元素渲染方法和input元素渲染方法。
所述元素渲染模块根据由元素选定模块获取到的插入值，在数组变量中定位到选定的文本元素，并对该选定的文本元素采用input元素渲染方法，使选定的文本元素在显示为可编辑状态。
所述可编辑状态具体表现为，在所述文本元素的位置出现一个输入框，且所述输入框的初始状态包含有所述文本元素中的文字信息，用户可在该输入框中进行文字编辑。
进一步地，所述数组更新模块还用于，若所述选定的文本元素被取消选定，则对所述输入框执行插入操作，所述插入操作具体为：若所述输入框不为空，则将所述输入框中的文字信息分割组成至少一个文本元素，并根据所述插入值更新所述数组变量。
若所述选定的文本元素被取消选定，以光标为例，即处于编辑状态的输入框中的光标移出了所述输入框，具体包括，通过选择其它的文本元素，从而使光标移动到其它的文本元素，或者通过左右移动将所述光标移出所述输入框，或者将所述输入框中的文字信息全部删除，则所述元素选定模块将所述输入框中的文字信息发送给所述数组更新模块用于执行插入操作：
若所述输入框为空，即所述输入框中的文字信息被全部删除，此时，数组更新模块将根据插入值，将对应的文本元素从所述数组变量中删除。
若所述输入框不为空，则所述数组更新模块需要对接收到的文字信息进行分割，组成至少一个文本元素，然后将组成的所有文本元素在所述插入值的位置加入到所述数组变量中，并更新所述数组元素中各个元素的索引值。
本发明实施例提供的装置用于执行上述方法，其功能具体参考上述方法实施例，其具体方法流程在此处不再赘述。
本发明实施例根据当前光标的插入值，将对与插入值对应的文本元素采用input元素渲染方法，将该文本元素显示为可编辑状态，在完成对输入框的编辑后执行插入操作，将输入框中的文字信息分割为多个文本元素，并根据所述插入值更新所述数组变量，从而使复杂编辑器能够实现对文本元素和复杂元素的编辑，增加了基于react的复杂编辑器的功能，满足了用户的需求。
图3示例了一种电子设备的实体结构示意图，如图3所示，该服务器可以包括：处理器(processor)810、通信接口(Communications Interface)820、存储器(memory)830和通信总线840，其中，处理器810，通信接口820，存储器830通过通信总线840完成相互间的通信。处理器810可以调用存储器830中的逻辑指令，以执行如下方法：获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
进一步地，本发明实施例公开一种计算机程序产品，所述计算机程序产品包括存储在非暂态计算机可读存储介质上的计算机程序，所述计算机程序包括程序指令，当所述程序指令被计算机执行时，计算机能够执行上述各方法实施例所提供的方法，例如包括：获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
进一步地，本发明实施例提供一种非暂态计算机可读存储介质，所述非暂态计算机可读存储介质存储计算机指令，所述计算机指令使所述计算机执行上述各方法实施例所提供的方法，例如包括：获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
本领域普通技术人员可以理解：此外，上述的存储器830中的逻辑指令可以通过软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分或者该技术方案的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random AccessMemory)、磁碟或者光盘等各种可以存储程序代码的介质。
以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。
最后应说明的是：以上实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的精神和范围。
Claims (10)
1.一种基于react实现复杂编辑器的方法，其特征在于，包括：
获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法；
按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
2.根据权利要求1所述的基于react实现复杂编辑器的方法，其特征在于，所述非复杂元素为文本元素、图片元素或超链接元素的一项或者多项；相应地，所述可选择信息为文字信息、图片信息或超链接信息的一项或者多项。
3.根据权利要求2所述的基于react实现复杂编辑器的方法，其特征在于，所述方法还包括：
获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
4.根据权利要求3所述的基于react实现复杂编辑器的方法，其特征在于，所述文本元素的数据模型中的渲染方法还包括input元素渲染方法；相应地，所述方法还包括：
对所述选定的文本元素采用input元素渲染方法，将所述文本元素显示为可编辑状态，所述可编辑状态具体为：将所述文本元素的文字信息置于输入框中进行编辑。
5.根据权利要求4所述的基于react实现复杂编辑器的方法，其特征在于，所述方法还包括：
若所述选定的文本元素被取消选定，则对所述输入框执行插入操作，所述插入操作具体为：若所述输入框不为空，则将所述输入框中的文字信息分割组成至少一个文本元素，并根据所述插入值更新所述数组变量。
6.根据权利要求3所述的基于react实现复杂编辑器的方法，其特征在于，所述方法还包括：
若对任一复杂元素进行选定，则相当于选定与所述复杂元素相邻的一个空的文本元素。
7.一种基于react实现复杂编辑器的装置，其特征在于，包括：
信息获取模块，用于获取预设的分别与非复杂元素与复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述非复杂元素或复杂元素分别对应的渲染方法；
元素渲染模块，用于按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素。
8.根据权利要求7所述的基于react实现复杂编辑器的装置，其特征在于，所述非复杂元素为文本元素、图片元素或超链接元素，相应地，所述装置还包括：
元素选定模块，用于获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
数组更新模块，用于若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
9.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至6任一项所述基于react实现复杂编辑器的方法的步骤。
10.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1至6任一项所述基于react实现复杂编辑器的方法的步骤。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910691959.7A CN110516028B (zh) | 2019-07-29 | 2019-07-29 | 一种基于react实现复杂编辑器的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201910691959.7A CN110516028B (zh) | 2019-07-29 | 2019-07-29 | 一种基于react实现复杂编辑器的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN110516028A true CN110516028A (zh) | 2019-11-29 |
| CN110516028B CN110516028B (zh) | 2022-04-29 |
Family
ID=68624764
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201910691959.7A Active CN110516028B (zh) | 2019-07-29 | 2019-07-29 | 一种基于react实现复杂编辑器的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN110516028B (zh) |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111079390A (zh) * | 2019-12-20 | 2020-04-28 | 五八有限公司 | 一种复选框列表的选择状态确定方法以及装置 |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050114761A1 (en) * | 2003-11-21 | 2005-05-26 | Microsoft Corporation | Accessing alternate content |
| US20060206827A1 (en) * | 2005-03-10 | 2006-09-14 | Siemens Medical Solutions Usa, Inc. | Live graphical user interface builder |
| CN102915328A (zh) * | 2012-09-04 | 2013-02-06 | 新浪网技术(中国)有限公司 | 编辑富文本的方法及富文本编辑器 |
| CN105843787A (zh) * | 2016-03-24 | 2016-08-10 | 武汉斗鱼网络科技有限公司 | 一种富文本编辑方法及系统 |
| US20180101295A1 (en) * | 2016-10-11 | 2018-04-12 | Salesforce.Com, Inc. | System for displaying elements of a scrollable list |
| CN108710490A (zh) * | 2017-04-12 | 2018-10-26 | 北京京东尚科信息技术有限公司 | 一种Web页面的编辑方法和装置 |
| CN109739611A (zh) * | 2019-01-25 | 2019-05-10 | 北京城市网邻信息技术有限公司 | 列表视图绘制方法、装置、终端和存储介质 |
| US20190187962A1 (en) * | 2016-12-03 | 2019-06-20 | Thomas STACHURA | Spreadsheet-Based Software Application Development |
-
2019
- 2019-07-29 CN CN201910691959.7A patent/CN110516028B/zh active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US20050114761A1 (en) * | 2003-11-21 | 2005-05-26 | Microsoft Corporation | Accessing alternate content |
| US20060206827A1 (en) * | 2005-03-10 | 2006-09-14 | Siemens Medical Solutions Usa, Inc. | Live graphical user interface builder |
| CN102915328A (zh) * | 2012-09-04 | 2013-02-06 | 新浪网技术(中国)有限公司 | 编辑富文本的方法及富文本编辑器 |
| CN105843787A (zh) * | 2016-03-24 | 2016-08-10 | 武汉斗鱼网络科技有限公司 | 一种富文本编辑方法及系统 |
| US20180101295A1 (en) * | 2016-10-11 | 2018-04-12 | Salesforce.Com, Inc. | System for displaying elements of a scrollable list |
| US20190187962A1 (en) * | 2016-12-03 | 2019-06-20 | Thomas STACHURA | Spreadsheet-Based Software Application Development |
| CN108710490A (zh) * | 2017-04-12 | 2018-10-26 | 北京京东尚科信息技术有限公司 | 一种Web页面的编辑方法和装置 |
| CN109739611A (zh) * | 2019-01-25 | 2019-05-10 | 北京城市网邻信息技术有限公司 | 列表视图绘制方法、装置、终端和存储介质 |
Non-Patent Citations (2)
| Title |
|---|
| 喻莹莹 等: "前后端分离的终端自适应动态表单设计", 《计算机系统应》 * |
| 潘琪 等: "CIM/SVG数据交互技术在电网预警和停电计划处理系统中", 《中国电力》 * |
Cited By (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN111079390A (zh) * | 2019-12-20 | 2020-04-28 | 五八有限公司 | 一种复选框列表的选择状态确定方法以及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN110516028B (zh) | 2022-04-29 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US10565296B2 (en) | Designing interactive web templates | |
| CN109408764B (zh) | 页面区域划分方法、装置、计算设备和介质 | |
| CN106339226B (zh) | 一种网页页面的展示方法和页面展示装置 | |
| CN115712413B (zh) | 低代码开发方法、装置、设备及存储介质 | |
| US8056005B2 (en) | Composing a machine readable document template | |
| CN113268233B (zh) | 一种页面生成方法、装置、计算机设备及存储介质 | |
| CN110545236A (zh) | 即时通讯消息修改方法及装置、存储介质、电子设备 | |
| CN111176643A (zh) | 子系统首页的生成方法及计算机可读存储介质 | |
| CN115510347A (zh) | 演示文稿的转换方法、装置、电子设备及存储介质 | |
| CN113741860A (zh) | 基于rpa机器人的数据处理方法及装置 | |
| CN110058854A (zh) | 用于生成应用的方法、终端设备和计算机可读介质 | |
| CN104965813B (zh) | 文字素材的处理方法和装置 | |
| CN113239310A (zh) | 一种页面加载方法及相关装置 | |
| CN110516028B (zh) | 一种基于react实现复杂编辑器的方法及装置 | |
| CN107423051B (zh) | 数据的配置方法和装置 | |
| US10388182B2 (en) | Socially enabled guidance for products with GUIs | |
| CN112367535B (zh) | 活动的用户界面的生成方法及装置 | |
| CN115269090A (zh) | 营销页面的生成方法、装置、终端及存储介质 | |
| CN111522546B (zh) | 一种页面的生成方法、相关装置及前端页面 | |
| CN113935300A (zh) | 一种动态表格生成方法及装置 | |
| CN111782309A (zh) | 显示信息的方法、装置及计算机可读存储介质 | |
| CN109726382A (zh) | 排版方法和装置 | |
| CN110322537A (zh) | 一种幻灯片过渡动画编辑方法和相关装置 | |
| CN118153533A (zh) | 表格数据处理方法及装置 | |
| CN117290628A (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 |