本申请涉及计算机技术领域，尤其涉及一种内容显示方法和装置。
背景技术：
在线编辑器依赖于浏览器，可用来对网页等内容进行在线编辑修改，让用户在浏览器和/或其他编辑工具上获得“所见即所得”的效果。在线编辑器在一个显示界面上提供两个显示区域，分别为编辑区域和预览区域。其中，编辑区域用于显示用户在此区域上输入的编辑内容，预览区域用于显示编辑内容经过解析渲染后的预览内容。当编辑区域中的编辑内容长度大于编辑区域的显示长度，或预览区域中的预览内容长度大于预览区域的显示长度时，浏览器分别给编辑区域和预览区域提供滑动控件(如滑动条、滑动光标等)。
目前，用户通过滑动控件滑动编辑区域上的编辑内容时，预览区域中的预览内容不会进行相应的滑动。同理，用户通过滑动控件滑动预览区域上的预览内容时，编辑区域中的编辑内容也不会进行相应的滑动。故如何实现编辑区域和预览区域的同步滑动是亟待解决的问题。
技术实现要素：
本申请实施例提供一种内容显示方法和装置，可以实现两个显示区域的协同滑动，增加内容显示的多样性，进而提高用户的使用体验。
第一方面，本申请实施例提供了一种内容显示方法，包括：
当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的该第一显示区域的第一显示位置；
根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的该第二显示区域上的第二显示位置；
根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
结合第一方面，在一种可能的实现方式中，获取该第一滑动位置对应的该第一显示区域的第一显示位置，包括：
获取该第一滑动位置对应的第一显示内容，并将该第一显示内容在该第一显示区域上的显示位置确定为第一显示位置。
结合第一方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。在获取该第一滑动位置对应的第一显示内容之前，该方法还包括：
对从该第一显示区域中采集到的至少一个文本段落设置位置标识；建立该第一显示区域的显示内容与该第一显示区域中第一滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定滑动位置对应的显示内容，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第一方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。在确定该第一显示位置对应的该第二显示区域上的第二显示位置之前，该方法还包括：
将该第一显示区域中的显示内容进行解析和渲染后输出至该目标显示界面的第二显示区域上显示；根据该第一显示区域中的显示内容与该第二显示区域中的显示内容之间的对应关系，建立该第一显示区域的显示位置与该第二显示区域的显示位置之间的位置对应关系。
结合第一方面，在一种可能的实现方式中，根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置，包括：
将该第二显示位置对应的显示内容确定为第二显示内容，并将该第二显示内容对应的滑动位置确定为该第二显示区域中第二滑动控件的第二滑动位置。
结合第一方面，在一种可能的实现方式中，该第一显示区域为预览区域，该第二显示区域为编辑区域。在将该第二显示位置对应的显示内容确定为第二显示内容之前，该方法还包括：
对从该第二显示区域中采集到的至少一个文本段落设置位置标识；建立该第二显示区域的显示内容与该第二显示区域上第二滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定显示内容对应的滑动位置，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第一方面，在一种可能的实现方式中，该第一滑动位置为该第一滑动控件在该第一显示区域中的第一滑动高度，该第二滑动位置为该第二滑动控件在该第二显示区域中的第二滑动高度。
第二方面，本申请实施例提供了一种内容显示装置，包括：
第一确定模块，用于当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置；
获取模块，用于获取该第一确定模块确定的第一滑动位置对应的该第一显示区域的第一显示位置；
第二确定模块，用于根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该获取模块获取到的第一显示位置对应的该第二显示区域上的第二显示位置；
第三确定模块，用于根据该第二确定模块确定的第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
滑动模块，用于将该第一滑动控件滑动至该第一确定模块确定的第一滑动位置的同时将该第二滑动控件滑动至该第三确定模块确定的第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
结合第二方面，在一种可能的实现方式中，上述获取模块包括：获取单元，用于获取该第一滑动位置对应的第一显示内容；确定单元，用于将该获取单元获取到的第一显示内容在该第一显示区域上的显示位置确定为第一显示位置。
结合第二方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。该获取模块还包括：
第一设置单元，用于在上述获取单元获取到该第一滑动位置对应的第一显示内容之前，对从该第一显示区域中采集到的至少一个文本段落设置位置标识；第一建立单元，用于建立该第一显示区域的显示内容与该第一显示区域中第一滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定滑动位置对应的显示内容，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第二方面，在一种可能的实现方式中，该第一显示区域为编辑区域，该第二显示区域为预览区域。该装置还包括：解析模块，用于将该第一显示区域中的显示内容进行解析和渲染后输出至该目标显示界面的第二显示区域上显示；建立模块，用于根据该第一显示区域中的显示内容与该第二显示区域中的显示内容之间的对应关系，建立该第一显示区域的显示位置与该第二显示区域的显示位置之间的位置对应关系。
结合第二方面，在一种可能的实现方式中，上述第三确定模块包括：
第一确定单元，将该第二显示位置对应的显示内容确定为第二显示内容；第二确定单元，用于将该第二显示内容对应的滑动位置确定为该第二显示区域中第二滑动控件的第二滑动位置。
结合第二方面，在一种可能的实现方式中，上述第一显示区域为预览区域，上述第二显示区域为编辑区域。上述第三确定模块还包括：
第二设置单元，用于对从该第二显示区域中采集到的至少一个文本段落设置位置标识；第二建立单元，用于建立该第二显示区域的显示内容与该第二显示区域上第二滑动控件的滑动位置之间的对应关系。其中一个文本段落对应一个位置标识，一个位置标识用于标识一个文本段落在该第一显示区域上的显示位置，该对应关系用于确定显示内容对应的滑动位置，该第一显示区域的显示内容包括设置位置标识后的至少一个文本段落。
结合第二方面，在一种可能的实现方式中，该第一滑动位置为该第一滑动控件在该第一显示区域中的第一滑动高度，该第二滑动位置为该第二滑动控件在该第二显示区域中的第二滑动高度。
第三方面，本申请实施例提供了一种电子设备，包括：处理器、用户接口以及存储器。该处理器、用户接口和存储器相互连接，其中，该用户接口用于显示目标显示界面，并接收用户在该目标显示界面的第一显示区域上的滑动操作，该存储器用于存储计算机程序，该计算机程序包括程序指令，该处理器被配置用于调用该程序指令，以执行以下操作：
当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的该第一显示区域的第一显示位置；
根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的该第二显示区域上的第二显示位置；
根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
第四方面，本申请实施例提供了一种计算机可读存储介质，该计算机可读存储介质存储有计算机程序，该计算机程序包括程序指令，当该处理器执行该程序指令时执行本申请实施例第一方面中的内容显示方法。
本申请实施例在监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的第一显示位置。根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的第二显示位置，再根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置。最后将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，可以使第二显示区域上显示的内容与第一滑动控件滑动过程中第一显示区域上显示的内容相对应，实现两个显示区域的协同滑动，同时实现两个显示区域上显示的内容的精准对应，增加内容显示的多样性，进而提高用户的使用体验。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图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中的滑动位置为第一滑动控件的滑动位置。
表1
在一些可行的实施方式中，当第一显示区域的显示内容的总长度大于当前视窗(即目标显示界面)中该第一显示区域的显示长度时，电子设备为该第一显示区域提供滑动控件，以使第一显示区域的显示内容可通过滑动控件的上下或左右滑动来实现在该第一显示区域上的显示。换句话说，滑动控件在滑动时，显示区域上显示的内容进行相应的滑动。例如，如图3b所示，图3b是本申请实施例提供的第一显示区域的另一示意图。如图3b所示，当前视窗中第一显示区域的显示长度为30行显示内容，而第一显示区域的显示内容的总长度为31行，则此时电子设备为第一显示区域提供滑动控件，以使超出第一显示区域显示长度的那一行显示内容通过滑动控件的上下滑动实现在第一显示区域上的显示。其中，滑动控件可以为滑块、光标等，本申请实施例对滑动控件的表现形式不做限定。
当目标显示界面的第一显示区域上存在滑动控件时，电子设备可以实时检测该第一显示区域上是否出现滑动事件。当用户通过鼠标、触控笔或手指等在该第一显示区域上进行滑动操作时，电子设备监测到该第一显示区域上出现滑动事件，则电子设备可以调用obj.offsettop(javascript)或$(obj).offset().top(jquery)函数获取该第一显示区域中第一滑动控件的第一滑动位置。该第一滑动控件可以为滑动条中的滚动滑块，该第一滑动位置可以为第一滑动控件在该第一显示区域中的第一滑动高度。电子设备可以从上述指定存储空间中获取该第一滑动位置对应的显示内容，并可以将该第一滑动位置对应的显示内容作为第一显示内容。电子设备可以将第一显示内容在该第一显示区域上的显示位置(即第一显示内容的位置标识)确定为第一显示位置。其中，第一滑动高度可以为第一滑动控件的当前位置相对于第一滑动控件的初始位置之间的高度。
s202，根据第一显示区域的显示位置与目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定第一显示位置对应的第二显示区域上的第二显示位置。
在一些可行的实施方式中，用户可以在上述第一显示区域上进行文本编辑时，电子设备可以实时采集用户在该第一显示区域上输入的文本内容(这里的文本内容是纯文本格式)，并可以将实时采集到的文本内容解析为超文本标记语言(hypertextmarkuplanguage，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，当监测到目标显示界面的第一显示区域上的滑动事件时，确定第一显示区域中第一滑动控件的第一滑动位置，并获取第一滑动位置对应的第一显示区域的第一显示位置。
在一些可行的实施方式中，用户可以在上述第二显示区域上进行文本编辑时，电子设备可以实时采集用户在该第二显示区域上输入的文本内容(这里的文本内容是纯文本格式)，并可以将实时采集到的文本内容解析为超文本标记语言(hypertextmarkuplanguage，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-volatilememory)，例如至少一个磁盘存储器。存储器1004可选的还可以是至少一个位于远离前述处理器1001的存储装置。如图9所示，作为一种计算机存储介质的存储器1004中可以包括操作系统、网络通信模块、用户接口模块以及设备控制应用程序。
在图9所示的电子设备1000中，用户接口1003主要用于为用户提供输入的接口，比如，用户接口1003用于显示目标显示界面，并接收用户在该目标显示界面的第一显示区域上的滑动操作；而处理器1001可以用于调用存储器1004中存储的设备控制应用程序，以实现：
当监测到目标显示界面的第一显示区域上的滑动事件时，确定该第一显示区域中第一滑动控件的第一滑动位置，并获取该第一滑动位置对应的该第一显示区域的第一显示位置；
根据该第一显示区域的显示位置与该目标显示界面上第二显示区域的显示位置之间的位置对应关系，确定该第一显示位置对应的该第二显示区域上的第二显示位置；
根据该第二显示位置确定该第二显示区域中第二滑动控件的第二滑动位置；
将该第一滑动控件滑动至该第一滑动位置的同时将该第二滑动控件滑动至该第二滑动位置，以使该第二显示区域上显示的内容与该第一滑动控件滑动过程中该第一显示区域上显示的内容相对应。
应当理解，本申请实施例中的处理器1001可以是中央处理单元(centralprocessingunit，cpu)，该处理器还可以是其他通用处理器、数字信号处理器(digitalsignalprocessor，dsp)、专用集成电路(applicationspecificintegratedcircuit，asic)、现成可编程门阵列(field-programmablegatearray，fpga)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
该存储器1004可以包括只读存储器和随机存取存储器，并向处理器1001提供指令和数据。存储器1004的一部分还可以包括非易失性随机存取存储器。例如，存储器1004还可以存储设备类型的信息。
具体实现中，本申请实施例中所描述的电子设备1000可执行前文图2或图5所对应实施例中对内容显示方法的描述，也可执行前文图6所对应实施例中对内容显示装置的描述，在此不再赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。
此外，这里需要指出的是：本申请实施例还提供了一种计算机可读存储介质，且所述计算机可读存储介质中存储有前文提及的电子设备1000所执行的计算机程序，且所述计算机程序包括程序指令，当所述处理器执行所述程序指令时，能够执行前文图2或图5所对应实施例中对所述内容显示方法的描述，因此，这里将不再进行赘述。另外，对采用相同方法的有益效果描述，也不再进行赘述。对于本申请所涉及的计算机可读存储介质实施例中未披露的技术细节，请参照本申请方法实施例的描述。
本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可读存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(read-onlymemory，rom)或随机存储记忆体(randomaccessmemory，ram)等。
以上所揭露的仅为本申请较佳实施例而已，当然不能以此来限定本申请之权利范围，因此依本申请权利要求所作的等同变化，仍属本申请所涵盖的范围。