一种文本组件编辑方法、装置、设备和可读介质与流程

1.本技术涉及计算机技术领域，尤其涉及一种文本组件编辑方法、装置、设备和计算机可读介质。


背景技术：

2.随着大数据概念的普及，各行各业的用户对大数据可视化的需求层出不穷。在进行数据可视化项目搭建过程中，在所搭建项目的页面中可以包含各种各样的页面组件，例如，图表组件、形状组件、装饰组件、按钮组件、多媒体组件、文本组件等。
3.目前，当用户在画布中编辑文本组件时，在响应于用户操作生成或选中文本组件后，需要获取用户对文本组件的双击操作，以激活文本组件并将焦点定位在文本组件中，从而，文本组件可以接收用户输入的文本内容。
4.现有技术中，对文本组件的文本内容进行编辑的过程中的用户操作比较繁琐，需要提供一种更高效便捷的文本组件编辑方法。


技术实现要素：

5.本说明书实施例提供一种文本组件编辑方法、装置、设备和计算机可读介质，用于提高文本组件的编辑效率。
6.为解决上述技术问题，本说明书实施例是这样实现的：
7.本说明书实施例提供的一种文本组件编辑方法，包括：
8.获取针对目标文本组件的组件选中事件；
9.响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框；
10.响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态；
11.监听用户的文本输入操作；
12.响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
13.本说明书实施例提供的一种文本组件编辑装置，包括：
14.获取模块，用于获取针对目标文本组件的组件选中事件；
15.目标文本框生成模块，用于响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框；
16.焦点设置模块，用于响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态；
17.输入操作监听模块，用于监听用户的文本输入操作；
18.文本显示模块，用于响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
19.本说明书实施例提供的一种文本组件编辑设备，包括：
20.至少一个处理器；以及，
21.与所述至少一个处理器通信连接的存储器；其中，
22.所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够：
23.获取针对目标文本组件的组件选中事件；
24.响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框；
25.响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态；
26.监听用户的文本输入操作；
27.响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
28.本说明书实施例提供的一种计算机可读介质，其上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现一种文本组件编辑方法。
29.本说明书一个实施例至少能够达到以下有益效果：通过当确定目标文本组件被选中时，生成位于目标文本组件上层的目标文本框，并在生成的目标文本框中自动聚焦，同时开始监听用户的文本输入操作，并将用户输入的文本显示在目标文本框中，使得，目标文本组件只要在选中状态下，就自动聚焦并接收用户的输入信息，而无需用户在输入文本信息之前执行双击等聚焦操作，节省了用户操作，提高了页面组件编辑效率。
附图说明
30.为了更清楚地说明本说明书实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术中记载的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。
31.图1是本说明书实施例提供的一种文本组件编辑方法的流程图示意图；
32.图2是本说明书实施例提供的一种文本组件编辑装置的示意图；
33.图3是本说明书实施例提供的一种文本组件编辑设备的示意图。
具体实施方式
34.在构建数据可视化项目的过程中，往往需要添加一些文本组件。通常，用户添加文本组件的过程为：用户基于组件库中的文本组件模块，在画布添加一个文本组件；然后当需要对该添加的文本组件进行编辑时(例如，当需要输入文本时)，用户需要再对该文本组件执行聚焦操作(例如，双击操作)，此时，用户通过键盘或触摸屏等文本输入设备输入的信息，才能够添加到该文本组件。在现有技术中，用户在不执行聚焦操作的情况下，如果直接通过文本输入设备输入信息，并无法添加到该文本组件。可见，现有的文本组件编辑方法中，用户操作繁琐，尤其当有大量的文本组件需要添加和编辑时，用户进行文本组件编辑的效率较低。
35.鉴于此，在本技术的实施例中，提供了一种更高效便捷的文本组件编辑方法。
36.为使本说明书一个或多个实施例的目的、技术方案和优点更加清楚，下面将结合本说明书具体实施例及相应的附图对本说明书一个或多个实施例的技术方案进行清楚、完整地描述。显然，所描述的实施例仅是本说明书的一部分实施例，而不是全部的实施例。基
于本说明书中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本说明书一个或多个实施例保护的范围。
37.应当理解，尽管在本技术文件中可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。
38.以下结合附图，详细说明本说明书各实施例提供的技术方案。
39.图1为本说明书实施例提供的一种文本组件编辑方法的流程示意图。从程序角度而言，流程的执行主体可以为搭载于应用终端的程序。
40.如图1所示，该流程可以包括以下步骤：
41.步骤102：获取针对目标文本组件的组件选中事件。
42.其中，所述目标文本组件，具体是指可以实现文本内容编辑的控件。所述目标文本组件可以包括单行文本组件或多行文本组件。在实际应用中，例如，可以基于javascript提供的input标签和span标签来组成目标文本组件。
43.在可选的实施例中，所述获取针对目标文本组件的组件选中事件，具体可以包括：获取用户针对目标文本组件的组件选中操作；响应于所述组件选中操作，将所述目标文本组件设置为选中状态。其中，所述组件选中操作可以包括例如单击操作、圈选操作等。在实际应用时，当用户执行了针对目标文本组件的选中操作，则认为触发了组件选中事件，即，本说明书实施例的执行主体可以获取到针对目标文本组件的组件选中事件。
44.在另一可选的实施例中，所述获取针对目标文本组件的组件选中事件，具体可以包括：获取用户用于生成文本组件的组件添加操作；响应于所述组件添加操作，生成目标文本组件并将生成的所述目标文本组件设置为选中状态。其中，所述组件添加操作，可以包括基于组件库中的文本组件模块在画布中添加文本组件的操作。例如，所述组件添加操作，具体可以包括将组件配置面板中的文本组件模块拖入到画布中的操作。基于本技术的实施例，默认将新生成的文本组件设置为被选中的状态。在实际应用时，当响应于用户执行的组件添加操作生成目标文本组件，则认为触发了组件选中事件，即，本说明书实施例的执行主体可以获取到针对目标文本组件的组件选中事件。
45.步骤104：响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框。
46.现有技术中，当用户针对文本组件执行组件选中操作或组件添加操作，使得组件处于被选中状态时，可以直接针对文本组件进行组件形态编辑，例如，可以包括对文本组件的位置、尺寸、旋转角度等进行改变。但是，现有技术中当文本组件处于被选中状态时，用户无法直接针对该文本组件进行文本内容的编辑；而在用户对文本组件进行文本内容的编辑之前，必须要对文本组件执行文本内容编辑触发操作，例如，需要进行双击操作。可见，用户对文本组件的编辑过程操作复杂，影响编辑效率。
47.与现有技术中不同的是，在本说明书实施例的方案中，当确定目标文本组件处于被选中状态时，则生成位于所述目标文本组件上层的目标文本框，以用于接收用户输入的文本内容。从用户的角度而言，节省了进行文本内容编辑之前的文本内容编辑触发操作，文本组件的编辑过程更简洁、效率更高。
48.另外需要说明的是，现有技术中，当文本组件处于被选中状态时，可能可以在编辑面板中来实施对文本组件中的文本内容的编辑，然而，这种通过编辑面板进行编辑的方式
虽然无需用户执行文本内容编辑触发操作，但是却需要用户在编辑面板中来查找相应的编辑项，仍然存在用户操作复杂的问题。
49.本说明书实施例的方案在实际应用中，所述生成位于所述目标文本组件上层的目标文本框，具体可以包括：生成位于所述目标文本组件上层的透明的目标文本框。或者，可选地，可以在生成位于所述目标文本组件上层的目标文本框之后，再将所述目标文本框设置为透明的。
50.其中，将所述目标文本框设置为透明的，具体可以是指，所述目标文本框的边框、填充色、选中标记元素等，均被设置为透明的。例如，将所述目标文本框的颜色的透明度属性设置为0。
51.将目标文本框设置为透明的好处至少在于：一方面，将目标文本框设置为透明的，能够使得目标文本框对于用户是隐藏的，即便用户此时并不打算对文本组件的文本内容进行编辑，也不会打扰到用户；另一方面，由于目标文本框与目标文本组件的位置是重叠的，将目标文本框设置为透明的，不会破坏目标文本组件的显示外观，也符合用户的观感习惯、页面编辑软件使用习惯等。
52.步骤106：响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态。
53.在本说明书的实施例中，当生成目标文本框后，则将当前焦点自动设置在所述目标文本框中。在实际应用中，当目标文本框获得焦点后，就可以获取用户输入的文本内容。
54.可选地，所述目标文本框获得焦点，可以体现为在目标文本框中显示有闪动的光标。所述闪动的光标可以在所述目标文本框为透明时被设置为透明的，可以在所述目标文本框设置为非透明时被设置为非透明的。
55.在实际应用中，具体可以通过javascript脚本来控制input输入框聚焦。例如，可以通过调用onfoucs钩子函数来实现对目标文本框的聚焦。
56.步骤108：监听用户的文本输入操作。
57.在本说明书的实施例中，所述监听用户的文本输入操作，具体可以包括：监听并获取各种信息输入接口提供的文本内容信息。例如，可以获取用户通过键盘、触摸屏等输入的文本内容信息。又如，可以先获取用户通过语音获取装置获取的用户语音信息，然后将所述用户语音信息经自然语言分析后转换为文本内容信息。
58.在实际应用中，若所述目标文本框为透明的，则所述监听用户的文本输入操作之后，还可以包括：响应于用户的文本输入操作，显示所述目标文本框。所述显示所述目标文本框，具体是指，将所述目标文本框的颜色的透明度属性设置为1。基于该方案使得，当用户执行输入信息的操作时(例如，当用户使用键盘打字时)，用户能够看到当前所编辑的文本框及已输入的内容，符合用户的交互习惯。
59.步骤110：响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
60.具体地，当用户输入文本内容后，可以将用户输入的文本内容实时显示在目标文本框中。
61.在实际应用中，本技术实施例中的文本组件编辑方法可以应用于数据可视化编辑器中。更具体地，可以应用于web页面的数据可视化编辑器中。
62.应当理解，本说明书一个或多个实施例所述的方法中，部分步骤的顺序可以根据实际需要调整，或者可以省略部分步骤。
63.图1中的方法，通过当确定目标文本组件被选中时，生成位于目标文本组件上层的目标文本框，并在生成目标文本框中自动聚焦，同时开启监听用户的文本输入操作，然后将用户输入的文本显示在目标文本框中，使得，目标文本组件只要在选中状态下，就自动聚焦并接收用户的输入信息，而无需用户在输入文本信息之前执行双击等聚焦操作，节省了用户操作，提高了页面组件编辑效率。
64.基于图1的方法，本说明书实施例还提供了该方法的一些具体实施方式，下面进行说明。
65.在本说明书的实施例中，可以在用户结束输入之后，将用户输入的文本内容填入到目标文本组件中。在实际应用中，若用户点击回车操作，或者用户单击目标文本组件之外的区域，则可以认为用户发出了文本内容输入结束的指示，从而将目标文本框中的内容填入到目标文本组件中。
66.具体地，所述将与所述文本输入操作对应的文本显示在所述目标文本框中之后，还可以包括：获取用户的文本输入结束指令；响应于所述文本输入结束指令，将所述目标文本框中的文本显示在所述目标文本组件中。
67.在实际应用中，响应于所述文本输入结束指令，目标文本框会失去焦点。所述将与所述文本输入操作对应的文本显示在所述目标文本框中之后，还可以包括：监听所述目标文本框的第一失焦触发事件；所述第一失焦触发事件包括用户在画布中所述目标文本组件之外的区域的操作；响应于所述第一失焦触发事件，在所述目标文本组件中显示所述目标文本框中的已输入文本。
68.其中，所述在所述目标文本组件中显示所述目标文本框中的已输入文本，具体包括：将所述目标文本框中已输入的全部文本内容输入至所述目标文本组件中。更具体地，若所述目标文本组件中包含原有文本内容，则可以以所述目标文本框中已输入的全部文本内容替换所述目标文本组件中的原有文本内容。
69.在实际应用中，在目标文本框因第一失焦触发事件而失去焦点的情况下，可以删除目标文本框。具体地，所述在所述目标文本组件中显示所述目标文本框中的已输入文本之后，还可以包括：删除所述目标文本框。
70.在本说明书的实施例中，还可以在用户输入文本内容的过程中，按照预设的更新规则，准实时地将用户在目标文本组件中输入的文本内容更新到所述目标文本组件中。
71.具体地，所述将与所述文本输入操作对应的文本显示在所述目标文本框中之后，还可以包括：获取用户在执行所述文本输入操作过程中的操作间隔时长；判断所述操作间隔时长是否大于预设时长，得到第一判断结果；若所述第一判断结果表示所述操作间隔时长大于所述预设时长，在所述目标文本组件中显示所述目标文本框中的已输入文本。
72.其中，所述操作间隔时长可以是指，用户在进行文本内容输入的过程中的停顿时长。相应地，所述预设的更新规则可以是指，当所述操作间隔时长大于所述预设时长时，则可以将用户的本次输入内容更新至目标文本组件中。其中，所述本次输入内容，可以是指当前时间距离上次更新时间之间，用户输入的内容。所述将用户的本次输入内容更新至目标文本框，具体可以是指，将用户的本次输入内容追加至所述目标文本组件中的上次更新内
容之后。其中，所述预设时长可以根据需要进行设置，例如，可以设置为0.5秒、1秒等。
73.基于本说明书实施例的方案，无需等待用户完成所有文本内容的输入后并通过手动操作来发出文本输入结束指令，就可以将目标文本框中的内容准实时更新得到目标文本组件中，进一步提升了用户的文本组件编辑效率。
74.在实际应用时，当目标文本组件处于被选中状态时，生成了目标文本框并且将焦点定位置目标文本框中，但是此时，若用户对目标文本组件执行组件形态编辑操作，例如，调整目标文本组件的尺寸、位置、角度等，则会导致目标文本框失去焦点。在这种情况下，可以认为用户仍然希望继续编辑目标文本组件，因此，本说明书实施例的方案可以再次让目标文本框聚焦，以确保能够接收到用户输入的文本内容信息。
75.具体地，所述将所述目标文本框设置为获得焦点状态之后，还可以包括：监听所述目标文本框的第二失焦触发事件；所述第二失焦触发事件包括用户针对所述目标文本组件的组件形态编辑操作；所述组件形态编辑操作包括组件位置移动操作、组件角度旋转操作或组件尺寸调整操作中的至少一者；响应于所述第二失焦触发事件，将所述目标文本框设置为重新获得焦点状态。
76.根据上面的描述可知，在实际应用时，在目标文本框失去焦点的情况下，可以判断导致所述目标文本框失去焦点的事件是第一失焦触发事件(例如，用户点击回车键的操作、用户点击目标文本组件外的区域的操作等)还是第二失焦触发事件(例如，用户对目标文本组件的形态进行编辑的操作等)，然后根据判断结果来确定是否将焦点重新定位在目标文本框中：若导致所述目标文本框失去焦点的事件是第二失焦触发事件，则说明用户很有可能还需要继续对目标文本组件的文本继续进行编辑，则自动将焦点重新定位在目标文本框中。基于该方案，能够进一步减少用户在文本组件编辑过程中的操作步骤，提高用户的文本组件编辑效率。
77.基于同样的思路，本说明书实施例还提供了上述方法对应的装置。图2为本说明书实施例提供的对应于图1的一种文本组件编辑装置的结构示意图。如图2所示，该装置可以包括：
78.获取模块202，用于获取针对目标文本组件的组件选中事件；
79.目标文本框生成模块204，用于响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框；
80.焦点设置模块206，用于响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态；
81.输入操作监听模块208，用于监听用户的文本输入操作；
82.文本显示模块210，用于响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
83.基于图2的装置，本说明书实施例还提供了该方法的一些具体实施方案，下面进行说明。
84.可选地，所述获取模块，具体可以用于：获取用户针对目标文本组件的组件选中操作；响应于所述组件选中操作，将所述目标文本组件设置为选中状态。
85.可选地，所述获取模块，具体可以用于：获取用户用于生成文本组件的组件添加操作；响应于所述组件添加操作，生成目标文本组件并将生成的所述目标文本组件设置为选
中状态。
86.可选地，所述装置还可以，在所述生成位于所述目标文本组件上层的目标文本框之后，将所述目标文本框设置为透明的。相应地，所述装置还可以在监听用户的文本输入操作之后：响应于用户的文本输入操作，显示所述目标文本框。
87.可选地，所述装置还可以，在将与所述文本输入操作对应的文本显示在所述目标文本框中之后：获取用户在执行所述文本输入操作过程中的操作间隔时长；判断所述操作间隔时长是否大于预设时长，得到第一判断结果；若所述第一判断结果表示所述操作间隔时长大于所述预设时长，在所述目标文本组件中显示所述目标文本框中的已输入文本。
88.可选地，所述装置还可以，在将与所述文本输入操作对应的文本显示在所述目标文本框中之后：监听所述目标文本框的第一失焦触发事件；所述第一失焦触发事件包括用户在画布中所述目标文本组件之外的区域的操作；响应于所述第一失焦触发事件，在所述目标文本组件中显示所述目标文本框中的已输入文本。
89.可选地，所述装置还可以，在所述目标文本组件中显示所述目标文本框中的已输入文本之后：删除所述目标文本框。
90.可选地，所述装置还可以，在所述将所述目标文本框设置为获得焦点状态之后：监听所述目标文本框的第二失焦触发事件；所述第二失焦触发事件包括用户针对所述目标文本组件的组件形态编辑操作；所述组件形态编辑操作包括组件位置移动操作、组件角度旋转操作或组件尺寸调整操作；响应于所述第二失焦触发事件，将所述目标文本框设置为重新获得焦点状态。
91.可以理解，上述的各模块是指计算机程序或者程序段，用于执行某一项或多项特定的功能。此外，上述各模块的区分并不代表实际的程序代码也必须是分开的。
92.基于同样的思路，本说明书实施例还提供了上述方法对应的设备。
93.图3为本说明书实施例提供的对应于图1的一种文本组件编辑设备的结构示意图。如图3所示，设备300可以包括：
94.至少一个处理器310；以及，
95.与所述至少一个处理器通信连接的存储器330；其中，
96.所述存储器330存储有可被所述至少一个处理器310执行的指令320，所述指令被所述至少一个处理器310执行，以使所述至少一个处理器310能够：
97.获取针对目标文本组件的组件选中事件；
98.响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框；
99.响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态；
100.监听用户的文本输入操作；
101.响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
102.基于同样的思路，本说明书实施例还提供了上述方法对应的计算机可读介质。计算机可读介质上存储有计算机可读指令，所述计算机可读指令可被处理器执行以实现以下方法：
103.获取针对目标文本组件的组件选中事件；
104.响应于所述组件选中事件，生成位于所述目标文本组件上层的目标文本框；
105.响应于生成所述目标文本框的事件，将所述目标文本框设置为获得焦点状态；
106.监听用户的文本输入操作；
107.响应于用户的文本输入操作，将与所述文本输入操作对应的文本显示在所述目标文本框中。
108.上述对本说明书特定实施例进行了描述，在一些情况下，在权利要求书中记载的动作或步骤可以按照不同于实施例中的顺序来执行并且仍然可以实现期望的结果。另外，在附图中描绘的过程不一定要求示出的特定顺序或者连续顺序才能实现期望的结果。在某些实施方式中，多任务处理和并行处理也是可以的或者可能是有利的。
109.本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可。
110.本说明书实施例提供的装置、设备与方法是对应的，因此，装置、设备也具有与对应方法类似的有益技术效果，由于上面已经对方法的有益技术效果进行了详细说明，因此，这里不再赘述对应装置、设备的有益技术效果。
111.为了描述的方便，描述以上装置时以功能分为各种单元分别描述。当然，在实施本技术时可以把各单元的功能在同一个或多个软件和/或硬件中实现。
112.本领域内的技术人员应明白，本发明的实施例可提供为方法、系统、或计算机程序产品。因此，本发明可采用完全硬件实施例、完全软件实施例、或结合软件和硬件方面的实施例的形式。而且，本发明可采用在一个或多个其中包含有计算机可用程序代码的计算机可用存储介质(包括但不限于磁盘存储器、cd
‑
rom、光学存储器等)上实施的计算机程序产品的形式。
113.本发明是参照根据本发明实施例的方法、设备(系统)和计算机程序产品的流程图和/或方框图来描述的。应理解可由计算机程序指令实现流程图和/或方框图中的每一流程和/或方框、以及流程图和/或方框图中的流程和/或方框的结合。可提供这些计算机程序指令到通用计算机、专用计算机、嵌入式处理机或其他可编程数据处理设备的处理器以产生一个机器，使得通过计算机或其他可编程数据处理设备的处理器执行的指令产生用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的装置。
114.这些计算机程序指令也可存储在能引导计算机或其他可编程数据处理设备以特定方式工作的计算机可读存储器中，使得存储在该计算机可读存储器中的指令产生包括指令装置的制造品，该指令装置实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能。
115.这些计算机程序指令也可装载到计算机或其他可编程数据处理设备上，使得在计算机或其他可编程设备上执行一系列操作步骤以产生计算机实现的处理，从而在计算机或其他可编程设备上执行的指令提供用于实现在流程图一个流程或多个流程和/或方框图一个方框或多个方框中指定的功能的步骤。
116.还需要说明的是，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、商品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、商品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、商品或者设备中还存在另外的相同要素。
117.本技术可以在由计算机执行的计算机可执行指令的一般上下文中描述，例如程序模块。一般地，程序模块包括执行特定任务或实现特定抽象数据类型的例程、程序、对象、组件、数据结构等等。也可以在分布式计算环境中实践本技术，在这些分布式计算环境中，由通过通信网络而被连接的远程处理设备来执行任务。在分布式计算环境中，程序模块可以位于包括存储设备在内的本地和远程计算机存储介质中。
118.以上所述仅为本技术的实施例而已，并不用于限制本技术。对于本领域技术人员来说，本技术可以有各种更改和变化。凡在本技术的精神和原理之内所作的任何修改、等同替换、改进等，均应包含在本技术的权利要求范围之内。