CN104111823A - 一种在线交互块式编辑方法及编辑器 - Google Patents
一种在线交互块式编辑方法及编辑器 Download PDFInfo
- Publication number
- CN104111823A CN104111823A CN201310138238.6A CN201310138238A CN104111823A CN 104111823 A CN104111823 A CN 104111823A CN 201310138238 A CN201310138238 A CN 201310138238A CN 104111823 A CN104111823 A CN 104111823A
- Authority
- CN
- China
- Prior art keywords
- character block
- editing
- frame
- label
- independent
- 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
Abstract
本发明公开了一种在线交互块式编辑方法及编辑器，该方法包括：设置文字块编辑框架；将所述文字块编辑框架独立于文档编辑区域；按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。利用本发明，可以实现在线块编辑，为在线创意编辑提供了可能。
Description
技术领域
本发明属于排版技术领域，具体涉及一种在线交互块式编辑方法及编辑器。
背景技术
目前基于HTML5的在线流式编辑器非常多，流式编辑器是一种流水线型的、非交互式的文本编辑器，它使用户可以在命令行上（而不是编辑器中）逐行串行对文件进行无破坏性编辑。流式编辑器适合编辑文档，而对于一些创意的编辑则需要块式编辑器。
利用块式编辑器可以创建块定义并添加动态行为，块式编辑器包含一个绘图区域，在该区域中，用户可以像在程序的主绘图区域中一样绘制和编辑几何图形，可以使用上下文选项卡或块编辑器编辑动态行为，也可以将动态行为添加到当前图形中现有的块定义，但现有的块式编辑器无法实现在线创意编辑。
发明内容
本发明提供一种在线交互块式编辑方法及编辑器，以实现在线块编辑，为在线创意编辑提供可能。
为此，本发明实施例提供如下技术方案：
一种在线交互块式编辑方法，包括：
设置文字块编辑框架；
将所述文字块编辑框架独立于文档编辑区域；
按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；
当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。
优选地，所述设置文字块框架包括：
利用<div>标签设置文字块框架。
优选地，所述方法还包括：
将标识文字块框架的<div>标签的位置设置为绝对位置。
优选地，所述将所述文字块编辑框架独立于文档编辑区域包括：
利用<iframe>标签将所述文字块编辑框架独立于文档编辑区域。
优选地，所述方法还包括：
利用临时对象模拟所有的状态提示。
一种在线交互块式编辑器，包括：文字输入模块和图片输入模块，还包括：文字块编辑模块，所述文字块编辑模块包括：
设置单元，用于设置文字块编辑框架；
连接单元，用于将所述文字块编辑框架独立于文档编辑区域；
创建单元，用于按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；
修改单元，用于当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。
优选地，所述设置单元，具体利用<div>标签设置文字块框架。
优选地，所述编辑器还包括：
定位单元，用于将标识文字块框架的<div>标签的位置设置为绝对位置。
优选地，所述连接单元，具体用于利用<iframe>标签将所述文字块编辑框架独立于文档编辑区域。
优选地，所述编辑器还包括：
状态提示单元，用于利用临时对象模拟所有的状态提示。
本发明在线交互块式编辑方法及编辑器，通过设置文字块编辑框架；将所述文字块编辑框架独立于文档编辑区域；按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。从而简单、有效地实现了在线块编辑，进而为在线创意编辑提供了可能。
附图说明
图1是本发明实施例在线交互块式编辑方法的流程图；
图2是利用本发明实施例在线交互块式编辑方法在浏览器的编辑窗口创建文字块的橡皮线示意图；
图3是本发明实施例在线交互块式编辑方法中在线文字块的编辑选中的示意图；
图4是本发明实施例在线交互块式编辑方法中在线文字块的移动缩放示意图；
图5是本发明实施例在线交互块式编辑器的结构示意图。
具体实施方式
下面结合附图和实施方式对本发明实施例作进一步的详细说明。
如图1所示，是本发明实施例在线交互块式编辑方法的流程图，包括以下步骤：
步骤101，设置文字块编辑框架。
具体地，可以利用<div>标签设置文字块框架。
需要说明的是，为了避免浏览器进行自动流式排版，可以将标识文字块框架的<div>标签的位置设置为绝对位置。这样所有的文字块就可以在页面内自由地摆放、随意地移动、放大或缩小，而不会影响其他的内容。
步骤102，将所述文字块编辑框架独立于文档编辑区域。
具体地，可以利用<iframe>标签将所述文字块编辑框架独立于文档编辑区域。
将所述文字块编辑框架独立于文档编辑区域，可以使编辑焦点或者选中状态不会因为鼠标点击或触摸等操作导致编辑焦点或者选中状态丢失。
步骤103，按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块，比如class='TextBlock'。
步骤104，当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容，比如class='page'。
利用本发明实施例的方法，可以基于HTML5（Hypertext MarkupLanguage5，超文本标记语言版本5），实现对文字块的在线块编辑。
例如，基于HTML5实现文字块编辑的框架组织如下：
上述框架采用双主体（body）的方式，工具条区域和文档区域层次结构上采用并列的方式，文档层内嵌iframe标签（用于定义内联框架），然后在iframe标签内的body中建立文档的编辑页面（page）。
采用内嵌的iframe看似增加了整个编辑框架的复杂度，但其真正的用意是分离编辑焦点和工具操作。由于浏览器和HTML本身的特点，当鼠标或者触控点击操作发生时，焦点对象是随着点击而改变的，那么就无法完成对文字的选中再点击工具按钮进行功能的应用。
为此，在本发明实施例中，利用上述iframe标签，其作用相当于在当前的web页面中又内嵌一个另外的web页面，两个页面互相不干扰。当点击发生在各自的区域时，由各自的页面进行处理，从而很好地解决了编辑文字时的焦点问题。
然后通过javascript将工具命令和文档进行联系，使工具的代码可以操作文档的结果，这样就可以形成文字的可视化的交互编辑。
如图2所示，是利用本发明实施例的方法创建文字块时提示文字块位置和大小的橡皮线示意图。
web页面不同于本地应用程序，本地应用程序都存在着GDI（GraphicsDevice Interface，图形设备接口），而基于浏览器和HTML的web页面则没有，因此所有的提示不能像本地应用那样将线条画到GDI上，而是所有显示的内容都必须有一个实体的对象才行，而且这个对象还必须挂在相应的DOM（Document Object Model，文档对象模型）节点上才可以显示。DOM是HTML与XML（Extensible Markup Language，可扩展的标记语言）的应用编程接口，DOM将整个页面映射为一个由层次节点组成的文件。
为了在这种显示和内容无法分离的状况中解决状态提示的问题，在本发明实施例中，可以采用一个伪临时对象来模拟所有的状态提示，比如在画文字块（包括创建和/或修改文字块）的时候，用所述伪临时对象来冒充文字块本身，等文字块画完，将它销毁。再比如，画文字块时的橡皮线，选中文字块时的角度状态和改变大小的手柄等，这些状态的对象本身也参与排版但并不影响排版，在显示的时候对象存在，不显示的时候对象就销毁。
如图3所示，是本发明实施例的方法中文字块的编辑状态示意图。
文字块采用<div>标签来实现，不同于其他比如<input>、<textarea>等可接受键盘输入的标签，<div>本身是不可编辑的，它并不能直接接收文字的录入，为此，在本发明实施例中，可以利用HTML5的contentEditable属性来使它变成可编辑状态（设置contentEditable=‘true’时，即可开启该元素的编辑模式），从而实现文字的录入。
如图4所示，是本发明实施例的方法中文字块的选中移动缩放状态示意图。
文字块的选中提示可以采用传统的手柄方式，既可以移动又可以拖动各个手柄进行不同方向的缩放。选中的边框和手柄同样采用伪临时对象的方式。
可见，利用本发明实施例在线交互块式编辑方法，可以简单、有效地实现在线块编辑，进而为在线创意编辑提供了可能。
相应地，本发明实施例还提供一种在线交互块式编辑器，如图5所示，是该编辑器的一种结构示意图。
在该实施例中，所述编辑器包括：文字输入模块501和图片输入模块502，以及文字块编辑模块503。其中，文字块编辑模块503包括：
设置单元531，用于设置文字块编辑框架；
连接单元532，用于将所述文字块编辑框架独立于文档编辑区域；
创建单元533，用于按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；
修改单元534，用于当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。
上述设置单元531具体可以利用<div>标签设置文字块框架。
需要说明的是，为了避免浏览器进行自动流式排版，所述编辑器还可进一步包括：定位单元（未图示），用于将设置单元531设置的用于标识文字块框架的<div>标签的位置设置为绝对位置。这样所有的文字块就可以在页面内自由地摆放、随意地移动、放大或缩小，而不会影响其他的内容。
上述连接单元532具体可以利用<iframe>标签将所述文字块编辑框架独立于文档编辑区域。将所述文字块编辑框架独立于文档编辑区域，可以使编辑焦点或者选中状态不会因为鼠标点击或触摸等操作导致编辑焦点或者选中状态丢失。
由于在web页面中，所有显示的内容都必须对应一个实体的对象，而且这个对象还必须挂在相应的DOM节点上才可以显示。因此，为了在这种显示和内容无法分离的状况中解决状态提示的问题，在本发明实施例的编辑器中，还可进一步包括：状态提示单元（未图示），用于利用临时对象模拟所有的状态提示。这些临时对象本身也参与排版但并不影响排版，在显示的时候所述临时对象存在，不显示的时候临时对象就销毁。
可见，利用本发明实施例在线交互块式编辑器，可以简单、有效地实现在线块编辑，进而为在线创意编辑提供了可能。
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
本发明的各个部件实施例可以以硬件实现，或者以在一个或者多个处理器上运行的软件模块实现，或者以它们的组合实现。本领域的技术人员应当理解，可以在实践中使用微处理器或者数字信号处理器（DSP）来实现根据本发明实施例的门禁控制系统中的一些或者全部部件的一些或者全部功能。
以上对本发明实施例进行了详细介绍，本文中应用了具体实施方式对本发明进行了阐述，以上实施例的说明只是用于帮助理解本发明的方法及设备；同时，对于本领域的一般技术人员，依据本发明的思想，在具体实施方式及应用范围上均会有改变之处，综上所述，本说明书内容不应理解为对本发明的限制。
Claims (10)
1.一种在线交互块式编辑方法，其特征在于，包括：
设置文字块编辑框架；
将所述文字块编辑框架独立于文档编辑区域；
按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；
当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。
2.根据权利要求1所述的方法，其特征在于，所述设置文字块框架包括：
利用<div>标签设置文字块框架。
3.根据权利要求2所述的方法，其特征在于，所述方法还包括：
将标识文字块框架的<div>标签的位置设置为绝对位置。
4.根据权利要求1所述的方法，其特征在于，所述将所述文字块编辑框架独立于文档编辑区域包括：
利用<iframe>标签将所述文字块编辑框架独立于文档编辑区域。
5.根据权利要求1至4任一项所述的方法，其特征在于，所述方法还包括：
利用临时对象模拟所有的状态提示。
6.一种在线交互块式编辑器，包括：文字输入模块和图片输入模块，其特征在于，还包括：文字块编辑模块，所述文字块编辑模块包括：
设置单元，用于设置文字块编辑框架；
连接单元，用于将所述文字块编辑框架独立于文档编辑区域；
创建单元，用于按照类名进行点击测试的方式在所述文字块编辑框架中创建文字块；
修改单元，用于当需要修改所述文字块中的内容时，按照类名进行点击测试的方式选中和移动所述内容。
7.根据权利要求6所述的编辑器，其特征在于，
所述设置单元，具体利用<div>标签设置文字块框架。
8.根据权利要求7所述的编辑器，其特征在于，所述编辑器还包括：
定位单元，用于将标识文字块框架的<div>标签的位置设置为绝对位置。
9.根据权利要求6所述的编辑器，其特征在于，
所述连接单元，具体用于利用<iframe>标签将所述文字块编辑框架独立于文档编辑区域。
10.根据权利要求6至9任一项所述的编辑器，其特征在于，所述编辑器还包括：
状态提示单元，用于利用临时对象模拟所有的状态提示。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310138238.6A CN104111823B (zh) | 2013-04-19 | 2013-04-19 | 一种在线交互块式编辑方法及编辑器 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201310138238.6A CN104111823B (zh) | 2013-04-19 | 2013-04-19 | 一种在线交互块式编辑方法及编辑器 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN104111823A true CN104111823A (zh) | 2014-10-22 |
| CN104111823B CN104111823B (zh) | 2018-01-19 |
Family
ID=51708623
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201310138238.6A Active CN104111823B (zh) | 2013-04-19 | 2013-04-19 | 一种在线交互块式编辑方法及编辑器 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN104111823B (zh) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106484413A (zh) * | 2016-09-30 | 2017-03-08 | 深圳市华傲数据技术有限公司 | 文档编辑器及文档编辑方法 |
| CN106598933A (zh) * | 2015-10-20 | 2017-04-26 | 北大方正集团有限公司 | 一种基于网页的排版文件校对方法及设备 |
| WO2023056901A1 (zh) * | 2021-10-08 | 2023-04-13 | 北京字跳网络技术有限公司 | 文档的处理方法、装置、终端和存储介质 |
Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102866827A (zh) * | 2012-08-21 | 2013-01-09 | 刘炳林 | 一种人机交互设备的文档编辑方法和装置 |
| CN102915328A (zh) * | 2012-09-04 | 2013-02-06 | 新浪网技术(中国)有限公司 | 编辑富文本的方法及富文本编辑器 |
-
2013
- 2013-04-19 CN CN201310138238.6A patent/CN104111823B/zh active Active
Patent Citations (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN102866827A (zh) * | 2012-08-21 | 2013-01-09 | 刘炳林 | 一种人机交互设备的文档编辑方法和装置 |
| CN102915328A (zh) * | 2012-09-04 | 2013-02-06 | 新浪网技术(中国)有限公司 | 编辑富文本的方法及富文本编辑器 |
Non-Patent Citations (1)
| Title |
|---|
| 王树威: ""关于HTML文本编辑器的选用"", 《计算机与信息技术》 * |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106598933A (zh) * | 2015-10-20 | 2017-04-26 | 北大方正集团有限公司 | 一种基于网页的排版文件校对方法及设备 |
| CN106598933B (zh) * | 2015-10-20 | 2019-10-15 | 北大方正集团有限公司 | 一种基于网页的排版文件校对方法及设备 |
| CN106484413A (zh) * | 2016-09-30 | 2017-03-08 | 深圳市华傲数据技术有限公司 | 文档编辑器及文档编辑方法 |
| CN106484413B (zh) * | 2016-09-30 | 2019-09-20 | 深圳市华傲数据技术有限公司 | 文档编辑器及文档编辑方法 |
| WO2023056901A1 (zh) * | 2021-10-08 | 2023-04-13 | 北京字跳网络技术有限公司 | 文档的处理方法、装置、终端和存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN104111823B (zh) | 2018-01-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| Jain et al. | AngularJS: A modern MVC framework in JavaScript | |
| US20100037168A1 (en) | Systems and methods for webpage design | |
| CN101446938B (zh) | 生成表格的方法和处理装置 | |
| US10049095B2 (en) | In-context editing of output presentations via automatic pattern detection | |
| US20140006913A1 (en) | Visual template extraction | |
| CN103970750B (zh) | 一种生成html网页的方法和装置 | |
| KR20060047996A (ko) | 디스플레이 정보 생성 방법 | |
| CN103942314A (zh) | 一种html文件图文混排显示方法 | |
| CN103793226B (zh) | 一种普适应用代码框架快速生成方法及原型系统 | |
| CN104424318A (zh) | 页面元素的控制方法及装置 | |
| CN104111823A (zh) | 一种在线交互块式编辑方法及编辑器 | |
| CN105739962B (zh) | 基于html的表格单元格编辑器控件扩展方法和系统 | |
| US10242139B2 (en) | Scheme and design markup language for interoperability of electronic design application tool and browser | |
| Kim et al. | A 3D XML-based customized framework for dynamic models | |
| Kato et al. | F3. js: A parametric design tool for physical computing devices for both interaction designers and end-users | |
| KR101730070B1 (ko) | ＳａａＳ 환경에서의 웹페이지 서비스 방법, 이를 위한 컴퓨터 프로그램, 그 기록매체 | |
| WO2005098662A1 (ja) | 文書処理装置及び文書処理方法 | |
| US9418454B1 (en) | Generating markup encodings for the compact rendering of curves in interactive graphical designs | |
| WO2006051974A1 (ja) | 文書処理装置および文書処理方法 | |
| CN106033348A (zh) | 一种制作网页的方法、装置及电子设备 | |
| JP2007183849A (ja) | 文書処理装置 | |
| JP4719743B2 (ja) | グラフ処理装置 | |
| WO2005098659A1 (ja) | 文書処理装置及び文書処理方法 | |
| US20080244394A1 (en) | Display and layout flow of relatively positioned user interface items | |
| Gärtner et al. | NLATool: An Application for Enhanced Deep Text Understanding |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TR01 | Transfer of patent right |
Effective date of registration: 20220624 Address after: 3007, Hengqin international financial center building, No. 58, Huajin street, Hengqin new area, Zhuhai, Guangdong 519031 Patentee after: New founder holdings development Co.,Ltd. Patentee after: BEIJING FOUNDER ELECTRONICS Co.,Ltd. Address before: 100871 8th floor, founder building, 298 Chengfu Road, Haidian District, Beijing Patentee before: PEKING UNIVERSITY FOUNDER GROUP Co.,Ltd. Patentee before: BEIJING FOUNDER ELECTRONICS Co.,Ltd. |
|
| TR01 | Transfer of patent right |