CN110209336B - 一种内容显示方法和装置 - Google Patents

一种内容显示方法和装置 Download PDF

Info

Publication number
CN110209336B
CN110209336B CN201910390854.8A CN201910390854A CN110209336B CN 110209336 B CN110209336 B CN 110209336B CN 201910390854 A CN201910390854 A CN 201910390854A CN 110209336 B CN110209336 B CN 110209336B
Authority
CN
China
Prior art keywords
display
sliding
area
display area
content
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
CN201910390854.8A
Other languages
English (en)
Other versions
CN110209336A (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.)
Shenzhen Tencent Computer Systems Co Ltd
Original Assignee
Shenzhen Tencent Computer Systems 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 Shenzhen Tencent Computer Systems Co Ltd filed Critical Shenzhen Tencent Computer Systems Co Ltd
Priority to CN201910390854.8A priority Critical patent/CN110209336B/zh
Publication of CN110209336A publication Critical patent/CN110209336A/zh
Application granted granted Critical
Publication of CN110209336B publication Critical patent/CN110209336B/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
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G06F3/0485—Scrolling or panning
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04886—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures by partitioning the display area of the touch-screen or the surface of the digitising tablet into independently controllable areas, e.g. virtual keyboards or menus
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/14—Digital output to display device ; Cooperation and interconnection of the display device with other functional units
    • G06F3/1423—Digital output to display device ; Cooperation and interconnection of the display device with other functional units controlling a plurality of local displays, e.g. CRT and flat panel display

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请实施例公开了一种内容显示方法以及装置，其中方法包括：在监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置，再根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置。最后将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置。采用本申请实施例，可以实现两个显示区域的协同滑动，增加内容显示的多样性，进而提高用户的使用体验。

Description

一种内容显示方法和装置
技术领域
本申请涉及计算机技术领域，尤其涉及一种内容显示方法和装置。
背景技术
在线编辑器依赖于浏览器，可用来对网页等内容进行在线编辑修改，让用户在浏览器和/或其他编辑工具上获得“所见即所得”的效果。在线编辑器在一个显示界面上提供两个显示区域，分别为编辑区域和预览区域。其中，编辑区域用于显示用户在此区域上输入的编辑内容，预览区域用于显示编辑内容经过解析渲染后的预览内容。当编辑区域中的编辑内容长度大于编辑区域的显示长度，或预览区域中的预览内容长度大于预览区域的显示长度时，浏览器分别给编辑区域和预览区域提供滑动控件(如滑动条、滑动光标等)。
目前，用户通过滑动控件滑动编辑区域上的编辑内容时，预览区域中的预览内容不会进行相应的滑动。同理，用户通过滑动控件滑动预览区域上的预览内容时，编辑区域中的编辑内容也不会进行相应的滑动。故如何实现编辑区域和预览区域的同步滑动是亟待解决的问题。
发明内容
本申请实施例提供一种内容显示方法和装置，可以实现两个显示区域的协同滑动，增加内容显示的多样性，进而提高用户的使用体验。
第一方面，本申请实施例提供了一种内容显示方法，包括：
当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的该第一显示区域的第一显示位置；
根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的该第二显示区域上的第二显示位置；
根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
结合第一方面，在一种可能的实现方式中，获取该第一滑动位置对应的该第一显示区域的第一显示位置，包括：
获取该第一滑动位置对应的第一显示内容，并将该第一显示内容在该第一显示区域上的显示位置确定为第一显示位置。
结合第一方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。在获取该第一滑动位置对应的第一显示内容之前，该方法还包括：
对从该第一显示区域中采集到的至少一个文本段落设置位置标识；建立该第一显示区域的显示内容与该第一显示区域中第一滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定滑动位置对应的显示内容，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第一方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。在确定该第一显示位置对应的该第二显示区域上的第二显示位置之前，该方法还包括：
将该第一显示区域中的显示内容进行解析和渲染后输出至该目标显示界面的第二显示区域上显示；根据该第一显示区域中的显示内容与该第二显示区域中的显示内容之间的对应关系，建立该第一显示区域的显示位置与该第二显示区域的显示位置之间的位置对应关系。
结合第一方面，在一种可能的实现方式中，根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置，包括：
将该第二显示位置对应的显示内容确定为第二显示内容，并将该第二显示内容对应的滑动位置确定为该第二显示区域中第二滑动控件的第二滑动位置。
结合第一方面，在一种可能的实现方式中，该第一显示区域为预览区域，该第二显示区域为编辑区域。在将该第二显示位置对应的显示内容确定为第二显示内容之前，该方法还包括：
对从该第二显示区域中采集到的至少一个文本段落设置位置标识；建立该第二显示区域的显示内容与该第二显示区域上第二滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定显示内容对应的滑动位置，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第一方面，在一种可能的实现方式中，该第一滑动位置为该第一滑动控件在该第一显示区域中的第一滑动高度，该第二滑动位置为该第二滑动控件在该第二显示区域中的第二滑动高度。
第二方面，本申请实施例提供了一种内容显示装置，包括：
第一确定模块，用于当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置；
获取模块，用于获取该第一确定模块确定的第一滑动位置对应的该第一显示区域的第一显示位置；
第二确定模块，用于根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该获取模块获取到的第一显示位置对应的该第二显示区域上的第二显示位置；
第三确定模块，用于根据该第二确定模块确定的第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
滑动模块，用于将该第一滑动控件滑动至该第一确定模块确定的第一滑动位置的同时将该第二滑动控件滑动至该第三确定模块确定的第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
结合第二方面，在一种可能的实现方式中，上述获取模块包括：获取单元，用于获取该第一滑动位置对应的第一显示内容；确定单元，用于将该获取单元获取到的第一显示内容在该第一显示区域上的显示位置确定为第一显示位置。
结合第二方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。该获取模块还包括：
第一设置单元，用于在上述获取单元获取到该第一滑动位置对应的第一显示内容之前，对从该第一显示区域中采集到的至少一个文本段落设置位置标识；第一建立单元，用于建立该第一显示区域的显示内容与该第一显示区域中第一滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定滑动位置对应的显示内容，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第二方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。该装置还包括：解析模块，用于将该第一显示区域中的显示内容进行解析和渲染后输出至该目标显示界面的第二显示区域上显示；建立模块，用于根据该第一显示区域中的显示内容与该第二显示区域中的显示内容之间的对应关系，建立该第一显示区域的显示位置与该第二显示区域的显示位置之间的位置对应关系。
结合第二方面，在一种可能的实现方式中，上述第三确定模块包括：
第一确定单元，将该第二显示位置对应的显示内容确定为第二显示内容；第二确定单元，用于将该第二显示内容对应的滑动位置确定为该第二显示区域中第二滑动控件的第二滑动位置。
结合第二方面，在一种可能的实现方式中，上述第一显示区域为预览区域，上述第二显示区域为编辑区域。上述第三确定模块还包括：
第二设置单元，用于对从该第二显示区域中采集到的至少一个文本段落设置位置标识；第二建立单元，用于建立该第二显示区域的显示内容与该第二显示区域上第二滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定显示内容对应的滑动位置，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第二方面，在一种可能的实现方式中，该第一滑动位置为该第一滑动控件在该第一显示区域中的第一滑动高度，该第二滑动位置为该第二滑动控件在该第二显示区域中的第二滑动高度。
第三方面，本申请实施例提供了一种电子设备，包括：处理器、用户接口以及存储器。该处理器、用户接口和存储器相互连接，其中，该用户接口用于显示目标显示界面，并接收用户在该目标显示界面的第一显示区域上的滑动操作，该存储器用于存储计算机程序，该计算机程序包括程序指令，该处理器被配置用于调用该程序指令，以执行以下操作：
当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的该第一显示区域的第一显示位置；
根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的该第二显示区域上的第二显示位置；
根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
第四方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序包括程序指令，当该处理器执行该程序指令时执行本申请实施例第一方面中的内容显示方法。
本申请实施例在监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置，再根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置。最后将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，可以使第二显示区域上显示的内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应，实现两个显示区域的协同滑动，同时实现两个显示区域上显示的内容的精准对应，增加内容显示的多样性，进而提高用户的使用体验。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本申请提供的在线编辑器的一界面示意图；
图2是本申请实施例提供的内容显示方法的一示意流程图；
图3a是本申请实施例提供的第一显示区域的一示意图；
图3b是本申请实施例提供的第一显示区域的一示意图；
图4a是本申请实施例提供的目标显示界面的一示意图；
图4b是本申请实施例提供的滑动控件滑动的一示意图；
图5是本申请实施例提供的内容显示方法的另一示意流程图；
图6是本申请实施例提供的内容显示装置的一结构示意图；
图7a是本申请实施例提供的获取模块的一结构示意图；
图7b为本申请实施例提供的获取模块的另一结构示意图；
图8a是本申请实施例提供的获取模块的一结构示意图；
图8b是本申请实施例提供的获取模块的另一结构示意图；
图9是本申请实施例提供的电子设备的一结构示意图。
具体实施方式
下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
应当理解，在本申请说明书和所附权利要求书中使用的术语“和/或”是指相关联列出的项中的一个或多个的任何组合以及所有可能组合，并且包括这些组合。
本申请提供的内容显示方法可适用于在线编辑器中。在线编辑器一般包括编辑区域、预览区域以及解析引擎三大功能模块，这三大功能模块由电子设备提供支持。当用户在编辑区域上输入编辑内容时，解析引擎对用户输入的编辑内容进行解析，从而生成对应的标记语言代码(如超文本标记语言或可扩展标记语言等)，将生成的标记语言代码写入预览区域，从而在预览区域上显示解析和渲染后的预览内容。
以Markdown在线编辑器“MdEditor”为例，如图1所示，图1是本申请提供的在线编辑器的一界面示意图。图1中，显示界面100中区域1表示“MdEditor”的编辑区域，显示界面100中区域2表示“MdEditor”的预览区域，显示界面100中区域3表示“MdEditor”的工具栏区域。本申请提供的内容显示方法应用于在线编辑器的编辑区域和预览区域。当用户在“MdEditor”显示界面的第一显示区域上滑动时，电子设备(或电子设备中的浏览器)确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。电子设备根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置，再根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置。最后电子设备将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，可以使第二显示区域上显示的内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应，实现两个显示区域的协同滑动，进而提高用户的使用体验。
本申请实施例提供的内容显示方法可适用于智能手机、平板电脑、台式电脑等电子设备。可选的，本申请实施例提供的内容显示方法可由上述任一类型的任一电子设备执行，也可为上述任一类型的任一电子设备的功能模块(比如浏览器等)执行，在此不做限制。为方便描述，下面将以电子设备为例进行说明。
下面将结合图2-图9，对本申请实施例提供的内容显示方法及装置进行详细介绍。
参见图2，是本申请实施例提供的内容显示方法的一示意流程图。为便于描述，本申请实施例以第一显示区域为编辑区域，第二显示区域为预览区域进行说明。如图2所示，该内容显示方法包括步骤：
S201，当监测到目标显示界面的第一显示区域上的滑动事件时，确定第一显示区域中第一滑动控件的第一滑动位置，并获取第一滑动位置对应的第一显示区域的第一显示位置。
在一些可行的实施方式中，上述目标显示界面上可以包括第一显示区域(即编辑区域)和第二显示区域(即预览区域)。该目标显示界面可以为在线编辑器正在编辑过程的界面，或者编辑完成后的界面。用户可以在目标显示界面中的第一显示区域上进行文本编辑，电子设备可以采集该第一显示区域上的所有文本内容(这里的文本内容是纯文本格式)，并可以对采集到的所有文本内容进行拆分，得到至少一个文本段落。电子设备可以对该至少一个文本段落中的各个文本段落设置位置标识(如行号标签)，其中一个文本段落上可以设置一个位置标识，一个位置标识可以用于标识一个文本段落在该第一显示区域上的显示位置。电子设备可以将上述设置位置标识后的至少一个文本段落作为上述第一显示区域的显示内容，并可以建立该第一显示区域的显示内容与该第一显示区域中第一滑动控件的滑动位置之间的对应关系。电子设备可以将该第一显示区域的显示内容和该第一滑动控件的滑动位置按照它们之间的对应关系进行关联存储至指定存储空间(比如电子设备的浏览器缓存中)。
如图3a所示，图3a是本申请实施例提供的第一显示区域的一示意图。其中，第一显示区域中101表示第一显示区域的文本编辑区，用户在文本编辑区101上输入的内容为文本内容。第一显示区域中106表示第一显示区域上的滑动条，105表示滑动条106中的滚动滑块(即第一滑动控件)。电子设备将文本编辑区101上所有文本内容进行拆分，得到多个文本段落，比如图3a中的文本段落103、104。电子设备针对多个文本段落中的每个文本段落设置位置标识，如图3a中的位置标识102。实际应用中，第一显示区域上不显示文本段落的位置标识(即第一显示区域不显示图3a中的位置标识102)，为便于理解，本申请实施例将文本段落的位置标识示意出来，但不构成对本申请第一显示区域的限定。例如，文本段落103的位置标识为E-9，文本段落104的位置标识为E-6。假设滚动条106的总高度为16cm(厘米)，滚动滑块105的初始位置为0cm，滚动滑块105的初始位置对应位置标识为E-1的文本段落。滚动滑块每移动0.5cm，文本编辑区101上的文本内容移动2.5cm。电子设备在拆分文本内容时，会计算拆分得到的每个文本段落的高度，比如图3a中文本段落103的高度为0.5cm，文本段落104的高度为1.5cm。如表1所示，是文本段落与滑动位置之间的关系示意表。表1中的所有文本段落作为第一显示区域的显示内容，表1中的滑动位置为第一滑动控件的滑动位置。
Figure BDA0002056440790000081
Figure BDA0002056440790000091
表1
在一些可行的实施方式中，当第一显示区域的显示内容的总长度大于当前视窗(即目标显示界面)中该第一显示区域的显示长度时，电子设备为该第一显示区域提供滑动控件，以使第一显示区域的显示内容可通过滑动控件的上下或左右滑动来实现在该第一显示区域上的显示。换句话说，滑动控件在滑动时，显示区域上显示的内容进行相应的滑动。例如，如图3b所示，图3b是本申请实施例提供的第一显示区域的另一示意图。如图3b所示，当前视窗中第一显示区域的显示长度为30行显示内容，而第一显示区域的显示内容的总长度为31行，则此时电子设备为第一显示区域提供滑动控件，以使超出第一显示区域显示长度的那一行显示内容通过滑动控件的上下滑动实现在第一显示区域上的显示。其中，滑动控件可以为滑块、光标等，本申请实施例对滑动控件的表现形式不做限定。
当目标显示界面的第一显示区域上存在滑动控件时，电子设备可以实时检测该第一显示区域上是否出现滑动事件。当用户通过鼠标、触控笔或手指等在该第一显示区域上进行滑动操作时，电子设备监测到该第一显示区域上出现滑动事件，则电子设备可以调用obj.offsetTop(JavaScript)或$(obj).offset().top(jQuery)函数获取该第一显示区域中第一滑动控件的第一滑动位置。该第一滑动控件可以为滑动条中的滚动滑块，该第一滑动位置可以为第一滑动控件在该第一显示区域中的第一滑动高度。电子设备可以从上述指定存储空间中获取该第一滑动位置对应的显示内容，并可以将该第一滑动位置对应的显示内容作为第一显示内容。电子设备可以将第一显示内容在该第一显示区域上的显示位置(即第一显示内容的位置标识)确定为第一显示位置。其中，第一滑动高度可以为第一滑动控件的当前位置相对于第一滑动控件的初始位置之间的高度。
S202，根据第一显示区域的显示位置与目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定第一显示位置对应的第二显示区域上的第二显示位置。
在一些可行的实施方式中，用户可以在上述第一显示区域上进行文本编辑时，电子设备可以实时采集用户在该第一显示区域上输入的文本内容(这里的文本内容是纯文本格式)，并可以将实时采集到的文本内容解析为超文本标记语言(hyper text markuplanguage，HTML)，再可以将解析得到的HTML渲染成网页输出至上述目标显示界面的第二显示区域上显示。换句话说，第二显示区域(即预览区域)中的显示内容可以为第一显示区域(即编辑区域)中的显示内容经过解析渲染后的内容。电子设备在解析渲染时，可以建立第一显示区域的显示内容与第二显示区域的显示内容之间的对应关系。第一显示区域的显示内容可以包括多个携带有位置标识的文本段落，位置标识可以用于表示文本段落在该第一显示区域上的显示位置。文本段落中包括上述实时采集到的文本内容。电子设备可以根据该对应关系建立上述第一显示区域的显示位置与上述第二显示区域的显示位置之间的位置对应关系。其中，本申请实施例的显示位置可以用位置标识(比如行号标签)来表示，第一显示区域的一个显示位置(或一个行号标签)可以对应第二显示区域的一个或多个显示位置(一个或多个行号标签)。
如图4a所示，图4a是本申请实施例提供的目标显示界面的一示意图。其中，目标显示界面左边的显示区域为第一显示区域，右边的显示区域为第二显示区域。图4a中的L1为第一显示区域的显示位置(即行号标签)，L2为第二显示区域的显示位置(即行号标签)。在实际应用中，第一显示区域的显示位置以及第二显示区域的显示位置不在目标显示界面上显示(即目标显示界面上无L1和L2)，而是存储在电子设备的存储空间中，为便于理解，本申请实施例将第一显示区域的显示位置以及第二显示区域的显示位置示意出来，但不构成对本申请第一显示区域和第二显示区域的限定。如图4a所示，第一显示区域上行号标签E-1对应的第二显示区域上行号标签V-1和V-2；第一显示区域上行号标签E-2对应的第二显示区域上行号标签可以为V-2或者为空；第一显示区域上行号标签E-3对应的第二显示区域上行号标签V-3；第一显示区域上行号标签E-4对应的第二显示区域上行号标签V-5等等。
在一些可行的实施方式中，当第二显示区域的显示内容的总长度大于当前视窗(即目标显示界面)中该第二显示区域的显示长度时，电子设备为该第二显示区域提供滑动控件，以使第二显示区域的显示内容可通过滑动控件的上下或左右滑动来实现在该第二显示区域上的显示。
在一些可行的实施方式中，电子设备可以从上述建立的位置对应关系中查找上述第一显示位置对应的上述第二显示区域上的第二显示位置。换句话说，根据上述建立的位置对应关系，定位第一显示区域上的第一显示位置在第二显示区域上对应的第二显示位置。例如，第一显示位置为行号标签E-6，上述位置对应关系中，第一显示区域的显示位置(行号标签)E-6对应的第二显示区域上的显示位置(行号标签)为V-8、V-9、V-10以及V-11。电子设备定位出的第一显示位置E-6对应的第二显示位置为V-8到V-11。
具体地，电子设备可以将上述第一显示位置作为$(obj).attr(‘data-sign’)(jQuery)函数的参数，调用$(obj).attr(‘data-sign’)(jQuery)函数获取上述第一显示位置对应的第二显示区域上的第二显示位置。若上述第一显示位置(行号标签)为位置区间(行号区间)，则可以将该第一显示位置的最小显示位置(最小行号标签)作为$(obj).attr(‘data-sign’)(jQuery)函数的参数。若上述第一显示位置为一个确定值(比如V-5)，则可以直接将该第一显示位置(比如，V-5或5)作为$(obj).attr(‘data-sign’)(jQuery)函数的参数。
S203，根据第二显示位置确定第二显示区域中第二滑动控件的第二滑动位置。
在一些可行的实施方式中，电子设备可以将上述第二显示位置对应的显示内容确定为第二显示内容，并可以将该第二显示内容对应的滑动位置确定为第二显示区域中第二滑动控件的第二滑动位置。其中，第二滑动控件可以为滑块。其中，该第二滑动位置可以为该第二滑动控件在该第二显示区域中的第二滑动高度。第二滑动高度可以为第二滑动控件的当前位置相对于第二滑动控件的初始位置之间的高度。
S204，将第一滑动控件滑动至第一滑动位置的同时将第二滑动控件滑动至第二滑动位置。
在一些可行的实施方式中，电子设备在将上述第一显示区域中的第一滑动控件滑动至上述第一滑动位置的同时，可以将上述第二显示区域中的第二滑动控件滑动至上述第二滑动位置。其中，第一滑动位置可以为第一滑动控件在第一显示区域中的第一滑动高度；第二滑动位置可以为第二滑动控件在第二显示区域中的第二滑动高度。例如，如图4b所示，图4b是本申请实施例提供的滑动控件滑动的示意图。假设第一滑动高度为0.3cm，第二滑动高度为3cm,第一滑动控件的当前滑动高度为0cm，第二滑动控件的当前滑动高度也为0cm；电子设备将第一滑动控件从该第一滑动控件的当前滑动高度0cm滑动至0.3cm的同时，将第二滑动控件从该第二滑动控件的当前滑动高度0cm滑动至3cm处。由于滑动控件在滑动时，显示区域上显示的内容也随之滑动，故两个滑动控件同时滑动时，两个滑动控件分别对应的显示区域上显示的内容也同时滑动。又因为第一滑动位置对应的显示内容经解析渲染后为第二滑动位置对应的显示内容，所以第二显示区域上显示为内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应。
本申请实施例中，电子设备在监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置，再根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置。最后将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，可以使第二显示区域上显示的内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应，实现两个显示区域的协同滑动，同时实现两个显示区域上显示的内容的精准对应，增加内容显示的多样性，进而提高用户的使用体验。
参见图5，是本申请实施例提供的内容显示方法的另一示意流程图。为便于描述，本申请实施例以第一显示区域为预览区域，第二显示区域为编辑区域进行说明。如图5所示，该内容显示方法包括步骤：
S401，对从目标显示界面的第二显示区域中采集到的至少一个文本段落设置位置标识。
S402，建立第二显示区域的显示内容与第二显示区域上第二滑动控件的滑动位置之间的对应关系。
在一些可行的实施方式中，上述目标显示界面上可以包括第一显示区域(即预览区域)和第二显示区域(即编辑区域)。该目标显示界面可以为在线编辑器正在编辑过程的界面，或者编辑完成后的界面。用户可以在目标显示界面中的第二显示区域上进行文本编辑，电子设备可以采集该第二显示区域上的所有文本内容(这里的文本内容是纯文本格式)，并可以对采集到的所有文本内容进行拆分，得到至少一个文本段落。电子设备可以对该至少一个文本段落中的各个文本段落设置位置标识(如行号标签)，其中一个文本段落上可以设置一个位置标识，一个位置标识可以用于标识一个文本段落在该第一显示区域上的显示位置。电子设备可以将上述设置位置标识后的至少一个文本段落作为上述第二显示区域的显示内容，并可以建立该第二显示区域的显示内容与该第二显示区域中第二滑动控件的滑动位置之间的对应关系。电子设备可以将该第二显示区域的显示内容和该第二滑动控件的滑动位置按照它们之间的对应关系进行关联存储至指定存储空间(比如电子设备的浏览器缓存中)。
S403，当监测到目标显示界面的第一显示区域上的滑动事件时，确定第一显示区域中第一滑动控件的第一滑动位置，并获取第一滑动位置对应的第一显示区域的第一显示位置。
在一些可行的实施方式中，用户可以在上述第二显示区域上进行文本编辑时，电子设备可以实时采集用户在该第二显示区域上输入的文本内容(这里的文本内容是纯文本格式)，并可以将实时采集到的文本内容解析为超文本标记语言(hyper text markuplanguage，HTML)，再可以将解析得到的HTML渲染成网页输出至上述目标显示界面的第一显示区域上显示。换句话说，第一显示区域(即预览区域)中的显示内容可以为第二显示区域(即编辑区域)中的显示内容经过解析渲染后的内容。电子设备在进行解析渲染时，可以建立第一显示区域的显示内容与第二显示区域的显示内容之间的对应关系。第二显示区域的显示内容可以包括多个携带有位置标识的文本段落，位置标识可以用于表示文本段落在该第二显示区域上的显示位置。文本段落中包括上述实时采集到的文本内容。电子设备可以根据该对应关系建立上述第二显示区域的显示位置与上述第一显示区域的显示位置之间的位置对应关系。其中，本申请实施例的显示位置可以用位置标识(比如行号标签)来表示，第二显示区域的一个显示位置(或一个行号标签)可以对应第一显示区域的一个或多个显示位置(一个或多个行号标签)。比如，第二显示区域上行号标签E-1对应的第一显示区域上行号标签V-1、V-2以及V-3；第二显示区域上行号标签E-2对应的第一显示区域上行号标签V-4，等等。
在一些可行的实施方式中，当第一显示区域的显示内容的总长度大于当前视窗(即目标显示界面)中该第一显示区域的显示长度时，电子设备为该第一显示区域提供滑动控件，以使第一显示区域的显示内容可通过滑动控件的上下或左右滑动来实现在该第一显示区域上的显示。换句话说，滑动控件在滑动时，显示区域上显示的内容进行相应的滑动。例如，假设当前视窗中第一显示区域的显示长度为30行显示内容，而第一显示区域的显示内容的总长度为31行，则此时电子设备为第一显示区域提供滑动控件，以使超出第一显示区域显示长度的那一行显示内容通过滑动控件的上下滑动实现在第一显示区域上的显示。其中，滑动控件可以为滑块、光标等，本申请实施例对滑动控件的表现形式不做限定。
当目标显示界面的第一显示区域上存在滑动控件时，电子设备可以实时检测该第一显示区域上是否出现滑动事件。当用户通过鼠标、触控笔或手指等在该第一显示区域上进行滑动操作时，电子设备监测到该第一显示区域上出现滑动事件，则电子设备可以调用obj.offsetTop(JavaScript)或$(obj).offset().top(jQuery)函数获取该第一显示区域中第一滑动控件的第一滑动位置。该第一滑动控件可以为滑动条中的滚动滑块，该第一滑动位置可以为该第一滑动控件在该第一显示区域中的第一滑动高度。电子设备可以获取该第一滑动位置对应的第一显示内容，并可以将该第一显示内容在该第一显示区域上的显示位置确定为第一显示位置。其中，第一滑动高度可以为滑动条中第一滑动控件的当前位置相对于第一滑动控件的初始位置之间的高度。
S404，根据第一显示区域的显示位置与目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定第一显示位置对应的第二显示区域上的第二显示位置。
在一些可行的实施方式中，电子设备可以从上述建立的位置对应关系(即第一显示区域的显示位置与第二显示区域的显示位置之间的位置对应关系)中查找上述第一显示位置对应的上述第二显示区域上的第二显示位置。换句话说，根据上述建立的位置对应关系，定位第一显示区域上的第一显示位置在第二显示区域上对应的第二显示位置。例如，第一显示位置为行号标签V-8，上述位置对应关系中，第一显示区域的显示位置(行号标签)V-8对应的第二显示区域上的显示位置(行号标签)为E-6。电子设备定位出的第一显示位置V-8对应的第二显示位置为E-6。
具体地，电子设备可以将上述第一显示位置作为$(obj).attr(‘data-sign’)(jQuery)函数的参数，调用$(obj).attr(‘data-sign’)(jQuery)函数获取上述第一显示位置对应的第二显示区域上的第二显示位置。若上述第一显示位置(行号标签)为位置区间(行号区间)，则可以将该第一显示位置的最小显示位置(最小行号标签)作为$(obj).attr(‘data-sign’)(jQuery)函数的参数。例如，上述第一显示位置为V-8到V-11，是一个位置区间，则将第二显示位置V-8到V-11中的V-8(或者8)作为$(obj).attr(‘data-sign’)(jQuery)函数的参数。若上述第一显示位置为一个确定值(比如V-5)，则可以直接将该第一显示位置(比如，V-5或5)作为$(obj).attr(‘data-sign’)(jQuery)函数的参数。
S405，将第二显示位置对应的显示内容确定为第二显示内容。
S406，获取第二显示内容对应的滑动位置，并将第二显示内容对应的滑动位置确定为第二显示区域中第二滑动控件的第二滑动位置。
在一些可行的实施方式中，当第二显示区域的显示内容的总长度大于当前视窗(即目标显示界面)中该第二显示区域的显示长度时，电子设备为该第二显示区域提供滑动控件，以使第二显示区域的显示内容可通过滑动控件的上下或左右滑动来实现在该第二显示区域上的显示。
在一些可行的实施方式中，电子设备可以获取该第二显示位置对应的显示内容(即第二显示位置所标识的显示内容)，并可以将该第二显示位置对应的显示内容作为第二显示内容。电子设备可以从上述指定存储空间中获取该第二显示内容对应的滑动位置，并可以将该第二显示内容对应的滑动位置确定为该第二显示区域中第二滑动控件的第二滑动位置。其中，该第二滑动位置可以为该第二滑动控件在该第二显示区域中的第二滑动高度。第二滑动高度可以为第二滑动控件的当前位置相对于第二滑动控件的初始位置之间的高度。
407，将第一滑动控件滑动至第一滑动位置的同时将第二滑动控件滑动至第二滑动位置。
在一些可行的实施方式中，本申请实施例中步骤S407的实现方式可参照图2所示实施例的步骤S204的实现方式，在此不再赘述。
本申请实施例中，电子设备对从目标显示界面的第二显示区域中采集到的至少一个文本段落设置位置标识，并建立第二显示区域的显示内容与第二显示区域上第二滑动控件的滑动位置之间的对应关系，第二显示区域的显示内容包括设置位置标识后的至少一个文本段落。在监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置。将该第二显示位置对应的显示内容确定为第二显示内容，再根据上述对应关系获取该第二显示内容对应的滑动位置，并将第二显示内容对应的滑动位置确定为第二显示区域中第二滑动控件的第二滑动位置。最后将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，可以使第二显示区域上显示的内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应，实现两个显示区域的协同滑动，同时实现两个显示区域上显示的内容的精准对应，增加内容显示的多样性，进而提高用户的使用体验。
参见图6，是本申请实施例提供的内容显示装置的一结构示意图。如图6所示，该内容显示装置200可以包括：第一确定模块10、获取模块20、第二确定模块30、第三确定模块40以及滑动模块50。其中，
第一确定模块10，用于当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置；
获取模块20，用于获取该第一确定模块确定的第一滑动位置对应的该第一显示区域的第一显示位置；
第二确定模块30，用于根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该获取模块获取到的第一显示位置对应的该第二显示区域上的第二显示位置；
第三确定模块40，用于根据该第二确定模块确定的第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
滑动模块50，用于将该第一滑动控件滑动至该第一确定模块确定的第一滑动位置的同时将该第二滑动控件滑动至该第三确定模块确定的第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
在一些可行的实施方式中，参见图7a，图7a为本申请实施例提供的获取模块的一结构示意图。如图7a所示，上述获取模块20包括获取单元201以及确定单元202。该获取单元201，用于获取该第一滑动位置对应的第一显示内容；该确定单元202，用于将该获取单元获取到的第一显示内容在该第一显示区域上的显示位置确定为第一显示位置。
在一些可行的实施方式中，上述第一显示区域为编辑区域，上述第二显示区域为预览区域。参见图7b，图7b为本申请实施例提供的获取模块的另一结构示意图。如图7b所示，上述获取模块20还包括第一设置单元203以及第一建立单元204。
该第一设置单元203，用于在上述获取单元获取到该第一滑动位置对应的第一显示内容之前，对从该第一显示区域中采集到的至少一个文本段落设置位置标识；该第一建立单元204，用于建立该第一显示区域的显示内容与该第一显示区域中第一滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定滑动位置对应的显示内容，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
在一些可行的实施方式中，上述第一显示区域为编辑区域，上述第二显示区域为预览区域。上述内容显示装置200还包括解析模块60以及建立模块70。该解析模块60，用于将该第一显示区域中的显示内容进行解析和渲染后输出至该目标显示界面的第二显示区域上显示；该建立模块70，用于根据该第一显示区域中的显示内容与该第二显示区域中的显示内容之间的对应关系，建立该第一显示区域的显示位置与该第二显示区域的显示位置之间的位置对应关系。
在一些可行的实施方式中，参见图8a，图8a为本申请实施例提供的获取模块的一结构示意图。如图8a所示，上述第三确定模块40包括第一确定单元401以及第二确定单元402。该第一确定单元401，将该第二显示位置对应的显示内容确定为第二显示内容；该第二确定单元402，用于将该第二显示内容对应的滑动位置确定为该第二显示区域中第二滑动控件的第二滑动位置。
在一些可行的实施方式中，上述第一显示区域为预览区域，上述第二显示区域为编辑区域。参见图8b，图8b为本申请实施例提供的获取模块的另一结构示意图。如图8b所示，上述第三确定模块40还包括第二设置单元703以及第二建立单元704。
该第二设置单元703，用于对从该第二显示区域中采集到的至少一个文本段落设置位置标识；该第二建立单元704，用于建立该第二显示区域的显示内容与该第二显示区域上第二滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定显示内容对应的滑动位置，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
在一些可行的实施方式中，上述第一滑动位置为上述第一滑动控件在上述第一显示区域中的第一滑动高度，上述第二滑动位置为上述第二滑动控件在上述第二显示区域中的第二滑动高度。
具体实现中，上述内容显示装置可通过上述各个模块执行上述图2或图5所提供的实现方式中各个步骤所提供的实现方式，实现上述各实施例中所实现的功能，具体可参见上述图2或图5所示的方法实施例中各个步骤提供的相应描述，在此不再赘述。
本申请实施例的内容显示装置在监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置，再根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置。最后将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，可以使第二显示区域上显示的内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应，实现两个显示区域的协同滑动，同时实现两个显示区域上显示的内容的精准对应，增加内容显示的多样性，进而提高用户的使用体验。
参见图9，是本申请实施例提供的电子设备的一结构示意图。如图9所示，本申请实施例中的电子设备1000可以包括：处理器1001、用户接口1003、存储器1004，此外，所述图像数据处理装置1000还可以包括至少一个通信总线1002。其中，通信总线1002用于实现这些组件之间的连接通信。其中，用户接口1003可以包括显示屏(Display)、键盘(Keyboard)，可选用户接口1003还可以包括标准的有线接口、无线接口。存储器1004可以是高速RAM存储器，也可以是非不稳定的存储器(non-volatile memory)，例如至少一个磁盘存储器。存储器1004可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图9所示，作为一种计算机存储介质的存储器1004中可以包括操作系统、网络通信模块、用户接口模块以及设备控制应用程序。
在图9所示的电子设备1000中，用户接口1003主要用于为用户提供输入的接口，比如，用户接口1003用于显示目标显示界面，并接收用户在该目标显示界面的第一显示区域上的滑动操作；而处理器1001可以用于调用存储器1004中存储的设备控制应用程序，以实现：
当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的该第一显示区域的第一显示位置；
根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的该第二显示区域上的第二显示位置；
根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
应当理解，本申请实施例中的处理器1001可以是中央处理单元(CentralProcessing Unit，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigitalSignal Processor，DSP)、专用集成电路(Application Specific Integrated Circuit，ASIC)、现成可编程门阵列(Field-Programmable Gate Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
该存储器1004可以包括只读存储器和随机存取存储器，并向处理器1001提供指令和数据。存储器1004的一部分还可以包括非易失性随机存取存储器。例如，存储器1004还可以存储设备类型的信息。
具体实现中，本申请实施例中所描述的电子设备1000可执行前文图2或图5所对应实施例中对内容显示方法的描述，也可执行前文图6所对应实施例中对内容显示装置的描述，在此不再赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。
此外，这里需要指出的是：本申请实施例还提供了一种计算机可读存储介质，且所述计算机可读存储介质中存储有前文提及的电子设备1000所执行的计算机程序，且所述计算机程序包括程序指令，当所述处理器执行所述程序指令时，能够执行前文图2或图5所对应实施例中对所述内容显示方法的描述，因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本申请所涉及的计算机可读存储介质实施例中未披露的技术细节，请参照本申请方法实施例的描述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-Only Memory，ROM)或随机存储记忆体(Random AccessMemory，RAM)等。
以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。

Claims (7)

1.一种内容显示方法，其特征在于，所述方法应用于在线编辑器中，所述方法包括：
将目标显示界面的编辑区域中的文本内容解析为超文本标记语言，并将解析得到的超文本标记语言渲染成网页输出至所述目标显示界面的预览区域上显示，并在解析渲染时，建立所述编辑区域的显示内容与所述预览区域的显示内容之间的对应关系；根据所述编辑区域中的文本内容与所述预览区域中的显示内容之间的对应关系，建立所述编辑区域的显示位置与所述预览区域的显示位置之间的位置对应关系，其中所述编辑区域的一个显示位置对应所述预览区域的一个或多个显示位置；
采集所述编辑区域上的所有文本内容，对采集到的所有文本内容进行拆分，得到至少一个文本段落，对所述至少一个文本段落中的各个文本段落设置位置标识，并建立所述编辑区域的显示内容与所述编辑区域中滑动控件的滑动位置之间的对应关系，所述对应关系用于确定滑动位置对应的显示内容，所述编辑区域的显示内容包括设置位置标识后的至少一个文本段落，其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在所述编辑区域上的显示位置，所述位置标识为行号标签；
当监测到所述目标显示界面的第一显示区域上的滑动事件时，确定所述第一显示区域中第一滑动控件的第一滑动位置，并获取所述第一滑动位置对应的所述第一显示区域的第一显示位置；根据所述第一显示区域的显示位置与所述目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定所述第一显示位置对应的所述第二显示区域上的第二显示位置，所述第一显示区域为所述编辑区域且所述第二显示区域为所述预览区域，所述第一滑动控件为所述编辑区域中的滑动控件；或者所述第一显示区域为所述预览区域且所述第二显示区域为所述编辑区域，所述第一滑动控件为所述预览区域中的滑动控件；
根据所述第二显示位置确定所述第二显示区域中第二滑动控件的第二滑动位置；将所述第一滑动控件滑动至所述第一滑动位置的同时将所述第二滑动控件滑动至所述第二滑动位置，以使所述第二显示区域上显示的内容与所述第一滑动控件滑动过程中所述第一显示区域上显示的内容精准对应。
2.如权利要求1所述的方法，其特征在于，所述获取所述第一滑动位置对应的所述第一显示区域的第一显示位置，包括：
获取所述第一滑动位置对应的第一显示内容，并将所述第一显示内容在所述第一显示区域上的显示位置确定为第一显示位置。
3.如权利要求1或2所述的方法，其特征在于，所述根据所述第二显示位置确定所述第二显示区域中第二滑动控件的第二滑动位置，包括：
将所述第二显示位置对应的显示内容确定为第二显示内容，并将所述第二显示内容对应的滑动位置确定为所述第二显示区域中第二滑动控件的第二滑动位置。
4.如权利要求1所述的方法，其特征在于，所述第一滑动位置为所述第一滑动控件在所述第一显示区域中的第一滑动高度，所述第二滑动位置为所述第二滑动控件在所述第二显示区域中的第二滑动高度。
5.一种内容显示装置，其特征在于，包括：
解析模块，用于将目标显示界面的编辑区域中的文本内容解析为超文本标记语言，并将解析得到的超文本标记语言渲染成网页输出至所述目标显示界面的预览区域上显示，并在解析渲染时，建立所述编辑区域的显示内容与所述预览区域的显示内容之间的对应关系；
建立模块，用于根据所述编辑区域中的文本内容与所述预览区域中的显示内容之间的对应关系，建立所述编辑区域的显示位置与所述预览区域的显示位置之间的位置对应关系，其中所述编辑区域的一个显示位置对应所述预览区域的一个或多个显示位置；
获取模块，用于采集所述编辑区域上的所有文本内容，对采集到的所有文本内容进行拆分，得到至少一个文本段落，对所述至少一个文本段落中的各个文本段落设置位置标识，并建立所述编辑区域的显示内容与所述编辑区域中滑动控件的滑动位置之间的对应关系，所述对应关系用于确定滑动位置对应的显示内容，所述编辑区域的显示内容包括设置位置标识后的至少一个文本段落，其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在所述编辑区域上的显示位置，所述位置标识为行号标签；
第一确定模块，用于当监测到所述目标显示界面的第一显示区域上的滑动事件时，确定所述第一显示区域中第一滑动控件的第一滑动位置；
所述获取模块，还用于获取所述第一确定模块确定的第一滑动位置对应的所述第一显示区域的第一显示位置；
第二确定模块，用于根据所述第一显示区域的显示位置与所述目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定所述获取模块获取到的第一显示位置对应的所述第二显示区域上的第二显示位置，所述第一显示区域为所述编辑区域且所述第二显示区域为所述预览区域，所述第一滑动控件为所述编辑区域中的滑动控件；或者所述第一显示区域为所述预览区域且所述第二显示区域为所述编辑区域，所述第一滑动控件为所述预览区域中的滑动控件；
第三确定模块，用于根据所述第二确定模块确定的第二显示位置确定所述第二显示区域中第二滑动控件的第二滑动位置；
滑动模块，用于将所述第一滑动控件滑动至所述第一确定模块确定的第一滑动位置的同时将所述第二滑动控件滑动至所述第三确定模块确定的第二滑动位置，以使所述第二显示区域上显示的内容与所述第一滑动控件滑动过程中所述第一显示区域上显示的内容精准对应。
6.一种电子设备，其特征在于，包括：处理器、用户接口以及存储器；
所述处理器、用户接口和存储器相互连接，其中，所述用户接口用于显示目标显示界面，并接收用户在所述目标显示界面的第一显示区域上的滑动操作，所述存储器用于存储计算机程序，所述计算机程序包括程序指令，所述处理器被配置用于调用所述程序指令，以执行以下操作：
将目标显示界面的编辑区域中的文本内容解析为超文本标记语言，并将解析得到的超文本标记语言渲染成网页输出至所述目标显示界面的预览区域上显示，并在解析渲染时，建立所述编辑区域的显示内容与所述预览区域的显示内容之间的对应关系；根据所述编辑区域中的文本内容与所述预览区域中的显示内容之间的对应关系，建立所述编辑区域的显示位置与所述预览区域的显示位置之间的位置对应关系，其中所述编辑区域的一个显示位置对应所述预览区域的一个或多个显示位置；
采集所述编辑区域上的所有文本内容，对采集到的所有文本内容进行拆分，得到至少一个文本段落，对所述至少一个文本段落中的各个文本段落设置位置标识，并建立所述编辑区域的显示内容与所述编辑区域中滑动控件的滑动位置之间的对应关系，所述对应关系用于确定滑动位置对应的显示内容，所述编辑区域的显示内容包括设置位置标识后的至少一个文本段落，其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在所述编辑区域上的显示位置，所述位置标识为行号标签；
当监测到所述目标显示界面的第一显示区域上的滑动事件时，确定所述第一显示区域中第一滑动控件的第一滑动位置，并获取所述第一滑动位置对应的所述第一显示区域的第一显示位置；根据所述第一显示区域的显示位置与所述目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定所述第一显示位置对应的所述第二显示区域上的第二显示位置，所述第一显示区域为所述编辑区域且所述第二显示区域为所述预览区域，所述第一滑动控件为所述编辑区域中的滑动控件；或者所述第一显示区域为所述预览区域且所述第二显示区域为所述编辑区域，所述第一滑动控件为所述预览区域中的滑动控件；
根据所述第二显示位置确定所述第二显示区域中第二滑动控件的第二滑动位置；将所述第一滑动控件滑动至所述第一滑动位置的同时将所述第二滑动控件滑动至所述第二滑动位置，以使所述第二显示区域上显示的内容与所述第一滑动控件滑动过程中所述第一显示区域上显示的内容精准对应。
7.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序包括程序指令，当处理器执行所述程序指令时执行如权利要求1-4任一项所述的方法。
CN201910390854.8A 2019-05-10 2019-05-10 一种内容显示方法和装置 Active CN110209336B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201910390854.8A CN110209336B (zh) 2019-05-10 2019-05-10 一种内容显示方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910390854.8A CN110209336B (zh) 2019-05-10 2019-05-10 一种内容显示方法和装置

Publications (2)

Publication Number Publication Date
CN110209336A CN110209336A (zh) 2019-09-06
CN110209336B true CN110209336B (zh) 2022-05-27

Family

ID=67785856

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910390854.8A Active CN110209336B (zh) 2019-05-10 2019-05-10 一种内容显示方法和装置

Country Status (1)

Country Link
CN (1) CN110209336B (zh)

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN106527888A (zh) * 2016-10-19 2017-03-22 广东欧珀移动通信有限公司 滑屏查找页面的方法及装置
CN107423031A (zh) * 2016-05-23 2017-12-01 阿里巴巴集团控股有限公司 一种编辑对象定位显示方法及装置
CN108363534A (zh) * 2018-01-30 2018-08-03 优视科技新加坡有限公司 可编辑对象的全局预览方法、装置及电子设备

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104503697B (zh) * 2014-12-29 2018-08-07 联想(北京)有限公司 一种信息处理方法及电子设备

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN107423031A (zh) * 2016-05-23 2017-12-01 阿里巴巴集团控股有限公司 一种编辑对象定位显示方法及装置
CN106527888A (zh) * 2016-10-19 2017-03-22 广东欧珀移动通信有限公司 滑屏查找页面的方法及装置
CN108363534A (zh) * 2018-01-30 2018-08-03 优视科技新加坡有限公司 可编辑对象的全局预览方法、装置及电子设备

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
Microsoft Office Word 2007;Microsoft Office;《Microsoft Office Word 2007》;20090113;全文 *

Also Published As

Publication number Publication date
CN110209336A (zh) 2019-09-06

Similar Documents

Publication Publication Date Title
AU2012370492B2 (en) Graphical overlay related to data mining and analytics
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
RU2662632C2 (ru) Представление документов фиксированного формата в формате с измененной компоновкой
US9934206B2 (en) Method and apparatus for extracting web page content
US9811505B2 (en) Techniques to provide processing enhancements for a text editor in a computing environment
US10572566B2 (en) Image quality independent searching of screenshots of web content
CN106610829A (zh) 网页截图方法和装置
US20130339839A1 (en) Analyzing User Interaction
CN111144078B (zh) Pdf文件中待标注位置确定方法、装置、服务器及存储介质
CN106610831A (zh) 网页截图方法和装置
CN110245069A (zh) 页面版本的测试方法和装置、页面的展示方法和装置
CN113282488B (zh) 终端的测试方法及装置、存储介质、终端
CN106951495A (zh) 用于呈现信息的方法和装置
CN106648571B (zh) 一种用于校对应用界面的方法和装置
JP2018501551A (ja) 数式処理方法、装置、デバイス及びプログラム
CN109656652B (zh) 网页图表绘制方法、装置、计算机设备和存储介质
CN107145494A (zh) 一种浏览网页中缩略图的方法及装置
CN110209336B (zh) 一种内容显示方法和装置
US20170270218A1 (en) Mapping of Defined Regions Within a Webpage
JP2019101889A (ja) テスト実行装置及びプログラム
CN111428452A (zh) 一种批注数据保存方法及装置
CN110515618B (zh) 页面信息录入优化方法、设备、存储介质及装置
CN105653603A (zh) 展示页面功能的方法及系统
JP5103590B2 (ja) 情報処理装置および情報処理方法
CN109492165B (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