一种可视化编辑器及使用方法与流程

1.本发明涉及编辑器领域，具体涉及一种可视化编辑器及使用方法。


背景技术：

2.在原型设计中，多项目复合组件是拥有多个文本条目的组件，如选项卡、树、分段控件等，对于多项类型复合组件来说，要使多项目复合组件具有可扩展性，则需要对其各个组成元素进行封装，其结果是复杂的，如果按常规的一步一步进入内部，找到需要更改内容的组件，然后再通过常规的方式进行内容的修改，虽然能达到目的，但操作不方便，操作时间过长。而复杂的封装具有以下几大问题：操作复杂，需要花费很多时间才能编辑内容或调整样式；无法做到调整条目顺序、设置默认选项等操作。


技术实现要素：

3.本发明所要解决的技术问题是针对现有技术的不足，提供一种可视化编辑器及使用方法。操作简单，可方便地对复合组件进行工整地展示，只需简单操作即可进行编辑、增加和删除操作，并可以调整条目的顺序，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
4.本发明解决上述技术问题的技术方案如下：
5.一种可视化编辑器，包括展示模块、调整模块、编辑模块和交互模块；
6.所述展示模块，用于通过筛选方式对复合组件进行查找，得到所述复合组件的条目，对所述条目进行展示；
7.所述调整模块，用于对所述条目的排序进行调整；
8.所述编辑模块，用于对所述条目进行添加、修改和删除操作；
9.所述交互模块，用于对所述条目关联交互事件。
10.本发明的有益效果是：操作简单，可方便地对复合组件进行工整地展示，只需简单操作即可进行编辑、增加和删除操作，并可以调整条目的顺序，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
11.进一步，所述条目包括文本、图标和图像；
12.所述展示模块，具体用于根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
13.采用上述进一步方案的有益效果是：采用树型结构展开可方便地对复合组件进行工整地展示，折叠与展开的展示方式更利于查看多条目内容。
14.进一步，所述调整模块包括上移按钮和下移按钮；所述调整模块具体用于：通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
15.采用上述进一步方案的有益效果是：简单操作即可调整条目的顺序。
16.进一步，所述编辑模块包括新增按钮和删除按钮；
17.所述编辑模块具体用于：通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
18.根据所述条目的类型，通过接收外部设备的修改信号对文本进行修改，或通过图标和图像替换的方式修改所述条目；
19.通过所述删除按钮或键盘delete键对所述条目进行删除。
20.采用上述进一步方案的有益效果是：简单操作即可进行编辑、增加和删除操作。
21.进一步，所述对所述条目关联交互事件具体包括：根据所述条目的索引关联交互事件；所述交互事件包括属性变更和页面跳转。
22.采用上述进一步方案的有益效果是：增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
23.本发明还提供一种可视化编辑器的使用方法，包括以下步骤：
24.通过筛选方式对复合组件进行查找，得到所述复合组件的条目；并对所述条目进行展示；
25.对所述条目的排序进行调整；
26.对所述条目进行添加、修改和删除操作；
27.对所述条目关联交互事件。
28.进一步，所述条目包括文本、图标和图像；
29.所述对对所述条目进行展示，具体包括：
30.根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
31.进一步，所述对所述条目的排序进行调整具体包括：
32.通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
33.进一步，所述对所述条目进行添加、修改和删除操作，具体包括：
34.通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
35.根据所述条目的类型，选择通过接收外部设备的修改信号对文本进行修改，或者直接通过图标和图像替换的方式修改所述条目；
36.通过所述删除按钮或键盘delete键对所述条目进行删除。
37.进一步，所述对所述条目关联交互事件，具体包括：
38.根据所述条目的索引关联交互事件；
39.所述交互事件包括属性变更和页面跳转。
附图说明
40.图1为本发明一实施例提供的一种可视化编辑器的功能模块示意图；
41.图2为本发明一实施例提供的一种可视化编辑器的界面示意图；
42.图3为本发明一实施例提供的一种可视化编辑器使用方法的流程示意图。
具体实施方式
43.以下结合附图对本发明的原理和特征进行描述，所举实例只用于解释本发明，并非用于限定本发明的范围。
44.实施例一
45.如图1所示，一种可视化编辑器，包括展示模块、调整模块、编辑模块和交互模块；
46.所述展示模块，用于通过筛选方式对复合组件进行查找，得到所述复合组件的条目，对所述条目进行展示；
47.所述调整模块，用于对所述条目的排序进行调整；
48.所述编辑模块，用于对所述条目进行添加、修改和删除操作；
49.所述交互模块，用于对所述条目关联交互事件。
50.其中，复合组件按复合组件的内容结构来分析，可以分为文本、图标和图像三种类型。
51.本实施例中，操作简单，可方便地对复合组件进行工整地展示，只需简单操作即可进行编辑、增加和删除操作，并可以调整条目的顺序，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
52.优选的，作为本发明的一个实施例，所述条目包括文本、图标和图像；
53.所述展示模块，具体用于根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
54.其中，按照从文本、图标到图像的优先级对条目内容进行展示，找到的第一个确定当前值编辑器内容的类型为文本、图标、图像中的一种，并把对应内容显示到可视化编辑器上。对于树型结构的复合组件，按层级结构显示为树型结构，并提供将复合组件以树型结构按分支关系在值编辑面板展示，展开的子条目的详细内容显示在可视化编辑器的右侧面板上。
55.上述实施例中，采用树型结构展开可方便地对复合组件进行工整地展示，折叠与展开的展示方式更利于查看多条目内容。
56.优选的，作为本发明的一个实施例，所述调整模块包括上移按钮和下移按钮；所述调整模块具体用于：通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
57.其中，通过可视化编辑器顶部的上移和下移按钮，或直接拖拽条目到对应的顺序位置，根据目标条目的索引，计算条目在所属列表类复合组件中新的索引位置，调整所选条目在同级列表中的位置。
58.上述实施例中，简单操作即可调整条目的顺序。
59.优选的，作为本发明的一个实施例，所述编辑模块包括新增按钮和删除按钮；
60.所述编辑模块具体用于：通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
61.根据所述条目的类型，通过接收外部设备的修改信号对文本进行修改，或通过图标和图像替换的方式修改所述条目；
62.通过所述删除按钮或键盘delete键对所述条目进行删除。
63.其中，可通过可视化编辑器的顶部的新增按钮，或在最后一项编辑新增条目，以条目的最后一项数据为模板，对当前的列表增加一个新条目，并启用新条目的编辑状态以供输入文本内容，并编辑替换其图标与图像。
64.其中，对于编辑条目，如果是文本，则直接在值编辑界面上可双击或回车显示输入框，并直接定位焦点到输入框中，输入内容回车后即可实时更新对应条目中的文本内容；如果是图标，直接启用图标库面板，当在图标库面板上选择图标后，立即应用图标到编辑器上所选条目对应的复合组件和子组件上；如果是图像，则操作同图标一致。
65.上述实施例中，简单操作即可进行编辑、增加和删除操作。
66.优选的，作为本发明的一个实施例，所述对所述条目关联交互事件具体包括：根据所述条目的索引关联交互事件；所述交互事件包括属性变更和页面跳转。
67.上述实施例中，增加交互，丰富编辑器的内容，使编辑器更具有可塑造性。
68.实施例二
69.为了便于理解，本实施例以一个较为具体的例子对一种可视化编辑器进行说明。如图2所示，一种可视化编辑器，向上箭头表示上移按钮，向下箭头表示下移按钮，用于调整条目顺序；加号表示添加按钮，垃圾框图标表示删除按钮，双击条目文字可形成输入框，对条目进行修改。选择条目后可对条目进行展开和折叠。在条目后可通过拖曳方式添加索引关联交互事件。
70.实施例三
71.本实施例提供一种可视化编辑器的使用方法，如图3所示，包括以下步骤：
72.通过筛选方式对复合组件进行查找，得到所述复合组件的条目；并对所述条目进行展示；
73.对所述条目的排序进行调整；
74.对所述条目进行添加、修改和删除操作；
75.对所述条目关联交互事件。
76.优选的，作为本发明的一个实施例，所述条目包括文本、图标和图像；
77.所述对对所述条目进行展示，具体包括：
78.根据预设优先级对所述文本、所述图标和所述图像按照树型结构进行展示；通过接收外部设备的展开信号对所述条目进行展开，得到多个子条目，再次通过接收外部设备的折叠信号对所述子条目进行折叠。
79.优选的，作为本发明的一个实施例，所述对所述条目的排序进行调整具体包括：
80.通过拖曳方式调整所述条目的顺序；或通过所述上移按钮对所述条目进行上移操作，通过所述下移按钮对所述条目进行下移操作。
81.优选的，作为本发明的一个实施例，所述对所述条目进行添加、修改和删除操作，具体包括：
82.通过所述新增按钮在所述条目的最后一项生成输入框添加新条目；
83.根据所述条目的类型，选择通过接收外部设备的修改信号对文本进行修改，或者直接通过图标和图像替换的方式修改所述条目；
84.通过所述删除按钮或键盘delete键对所述条目进行删除。
85.优选的，作为本发明的一个实施例，所述对所述条目关联交互事件，具体包括：
86.根据所述条目的索引关联交互事件；
87.所述交互事件包括属性变更和页面跳转。
88.以上所述仅为本发明的较佳实施例，并不用以限制本发明，凡在本发明的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本发明的保护范围之内。
89.所属领域的技术人员可以清楚地了解到，为了描述的方便和简洁，上述描述的装置和单元的具体工作过程，可以参考前述方法实施例中的对应过程，在此不再赘述。
90.在本技术所提供的几个实施例中，应该理解到，所揭露的装置和方法，可以通过其它的方式实现。例如，以上所描述的装置实施例仅仅是示意性的，例如，单元的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个单元或组件可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。
91.作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部单元来实现本发明实施例方案的目的。
92.另外，在本发明各个实施例中的各功能单元可以集成在一个处理单元中，也可以是各个单元单独物理存在，也可以是两个或两个以上单元集成在一个单元中。上述集成的单元既可以采用硬件的形式实现，也可以采用软件功能单元的形式实现。