CN110516028B - 一种基于react实现复杂编辑器的方法及装置 - Google Patents

一种基于react实现复杂编辑器的方法及装置 Download PDF

Info

Publication number
CN110516028B
CN110516028B CN201910691959.7A CN201910691959A CN110516028B CN 110516028 B CN110516028 B CN 110516028B CN 201910691959 A CN201910691959 A CN 201910691959A CN 110516028 B CN110516028 B CN 110516028B
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.)
Active
Application number
CN201910691959.7A
Other languages
English (en)
Other versions
CN110516028A (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.)
Beike Technology Co Ltd
Original Assignee
Beike 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 Beike Technology Co Ltd filed Critical Beike Technology Co Ltd
Priority to CN201910691959.7A priority Critical patent/CN110516028B/zh
Publication of CN110516028A publication Critical patent/CN110516028A/zh
Application granted granted Critical
Publication of CN110516028B publication Critical patent/CN110516028B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

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实现复杂编辑器的方法及装置
技术领域
本发明涉及数据处理技术领域，尤其涉及一种基于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 (7)

1.一种基于react实现复杂编辑器的方法，其特征在于，包括：
获取预设的分别与预设种类的非复杂元素和复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述数据模型对应的渲染方法，所述非复杂元素为文本元素；
按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的数据模型的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素，其中，所述可选择信息为文字信息；
获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
2.根据权利要求1所述的基于react实现复杂编辑器的方法，其特征在于，所述文本元素的数据模型中的渲染方法还包括input元素渲染方法；相应地，所述方法还包括：
对选定的文本元素采用input元素渲染方法，将所述文本元素显示为可编辑状态，所述可编辑状态具体为：将所述文本元素的文字信息置于输入框中进行编辑。
3.根据权利要求2所述的基于react实现复杂编辑器的方法，其特征在于，所述方法还包括：
若所述选定的文本元素被取消选定，则对所述输入框执行插入操作，所述插入操作具体为：若所述输入框不为空，则将所述输入框中的文字信息分割组成至少一个文本元素，并根据所述插入值更新所述数组变量。
4.根据权利要求1所述的基于react实现复杂编辑器的方法，其特征在于，所述方法还包括：
若对任一复杂元素进行选定，则相当于选定与所述复杂元素相邻的一个空的文本元素。
5.一种基于react实现复杂编辑器的装置，其特征在于，包括：
信息获取模块，用于获取预设的分别与非复杂元素与复杂元素一一对应的基于react的数据模型，以及数组变量；其中，所述数组变量包括所有非复杂元素和复杂元素，所述数据模型包括与所述非复杂元素或复杂元素分别对应的渲染方法，所述非复杂元素为文本元素；
元素渲染模块，用于按照所述数组变量中所有非复杂元素和复杂元素的排列顺序，对每个非复杂元素和复杂元素根据对应的渲染方法进行渲染后显示；其中，所述复杂元素显示为交互状态，所述交互状态具体为：可通过在预设的选择列表中选择所述复杂元素包含的可选择信息来更新所述数组变量中所述复杂元素，其中，所述可选择信息为文字信息；
元素选定模块，用于获取插入值，和根据所述复杂元素的数据模型预设的至少一种待插入复杂元素；其中，所述插入值为选定的非复杂元素在所述数组变量中依次排列的序号；
数组更新模块，用于若选择任一种待插入复杂元素，则根据所述插入值，将所述待插入复杂元素作为新的复杂元素加入到所述数组变量中，同时，在所述新的复杂元素前、后分别增加一个空的文本元素。
6.一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现如权利要求1至4任一项所述基于react实现复杂编辑器的方法的步骤。
7.一种非暂态计算机可读存储介质，其上存储有计算机程序，其特征在于，该计算机程序被处理器执行时实现如权利要求1至4任一项所述基于react实现复杂编辑器的方法的步骤。
CN201910691959.7A 2019-07-29 2019-07-29 一种基于react实现复杂编辑器的方法及装置 Active CN110516028B (zh)

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 CN110516028A (zh) 2019-11-29
CN110516028B true 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)

Families Citing this family (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN111079390B (zh) * 2019-12-20 2023-03-14 五八有限公司 一种复选框列表的选择状态确定方法以及装置

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102915328A (zh) * 2012-09-04 2013-02-06 新浪网技术(中国)有限公司 编辑富文本的方法及富文本编辑器
CN105843787A (zh) * 2016-03-24 2016-08-10 武汉斗鱼网络科技有限公司 一种富文本编辑方法及系统
CN108710490A (zh) * 2017-04-12 2018-10-26 北京京东尚科信息技术有限公司 一种Web页面的编辑方法和装置
CN109739611A (zh) * 2019-01-25 2019-05-10 北京城市网邻信息技术有限公司 列表视图绘制方法、装置、终端和存储介质

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7546531B2 (en) * 2003-11-21 2009-06-09 Microsoft Corporation Accessing alternate content
US20060206827A1 (en) * 2005-03-10 2006-09-14 Siemens Medical Solutions Usa, Inc. Live graphical user interface builder
US10620816B2 (en) * 2016-10-11 2020-04-14 Salesforce.Com, Inc. System for displaying elements of a scrollable list
US10216494B2 (en) * 2016-12-03 2019-02-26 Thomas STACHURA Spreadsheet-based software application development

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102915328A (zh) * 2012-09-04 2013-02-06 新浪网技术(中国)有限公司 编辑富文本的方法及富文本编辑器
CN105843787A (zh) * 2016-03-24 2016-08-10 武汉斗鱼网络科技有限公司 一种富文本编辑方法及系统
CN108710490A (zh) * 2017-04-12 2018-10-26 北京京东尚科信息技术有限公司 一种Web页面的编辑方法和装置
CN109739611A (zh) * 2019-01-25 2019-05-10 北京城市网邻信息技术有限公司 列表视图绘制方法、装置、终端和存储介质

Non-Patent Citations (2)

* Cited by examiner, † Cited by third party
Title
CIM/SVG数据交互技术在电网预警和停电计划处理系统中;潘琪 等;《中国电力》;20180410;第51卷(第04期);155-160 *
前后端分离的终端自适应动态表单设计;喻莹莹 等;《计算机系统应》;20180415;第27卷(第04期);70-75 *

Also Published As

Publication number Publication date
CN110516028A (zh) 2019-11-29

Similar Documents

Publication Publication Date Title
CN107704576B (zh) 数据展示优化方法、装置、终端设备及存储介质
WO2017167065A1 (zh) 页面资源投放方法及装置
CN109408764B (zh) 页面区域划分方法、装置、计算设备和介质
US10565296B2 (en) Designing interactive web templates
CN110545236A (zh) 即时通讯消息修改方法及装置、存储介质、电子设备
CN113741860A (zh) 基于rpa机器人的数据处理方法及装置
CN115510347A (zh) 演示文稿的转换方法、装置、电子设备及存储介质
CN111176643A (zh) 子系统首页的生成方法及计算机可读存储介质
CN110058854A (zh) 用于生成应用的方法、终端设备和计算机可读介质
CN104965813B (zh) 文字素材的处理方法和装置
CN110516028B (zh) 一种基于react实现复杂编辑器的方法及装置
CN107491311B (zh) 生成页面文件的方法、系统以及计算机设备
CN107423051B (zh) 数据的配置方法和装置
US10388182B2 (en) Socially enabled guidance for products with GUIs
CN112367535B (zh) 活动的用户界面的生成方法及装置
CN115269090A (zh) 营销页面的生成方法、装置、终端及存储介质
CN114253664A (zh) 虚拟化系统组态模板生成方法、装置、设备、存储介质
CN111538490A (zh) 一种基于FreeMarker的数据融合方法及装置
CN112657194A (zh) 一种游戏技能修改方法与装置
CN113935300A (zh) 一种动态表格生成方法及装置
CN112632444A (zh) 可视化网站主题配置方法和装置
CN108647198B (zh) 一种基于Unity的字编辑方法及终端
CN117151157B (zh) 基于ai机器人教学平台的教学方法、装置、计算机设备及存储介质
CN113438541B (zh) 一种视点动画生成方法、装置、设备和存储介质
CN118153533A (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