CN117195840B - web编辑器中实时标注和***异形对象的方法及装置 - Google Patents

web编辑器中实时标注和***异形对象的方法及装置 Download PDF

Info

Publication number
CN117195840B
CN117195840B CN202311475257.8A CN202311475257A CN117195840B CN 117195840 B CN117195840 B CN 117195840B CN 202311475257 A CN202311475257 A CN 202311475257A CN 117195840 B CN117195840 B CN 117195840B
Authority
CN
China
Prior art keywords
content
word
cursor
special
input
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
CN202311475257.8A
Other languages
English (en)
Other versions
CN117195840A (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.)
Oneweb Beijing Technology Co ltd
Original Assignee
Oneweb Beijing Technology 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 Oneweb Beijing Technology Co ltd filed Critical Oneweb Beijing Technology Co ltd
Priority to CN202311475257.8A priority Critical patent/CN117195840B/zh
Publication of CN117195840A publication Critical patent/CN117195840A/zh
Application granted granted Critical
Publication of CN117195840B publication Critical patent/CN117195840B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Document Processing Apparatus (AREA)

Abstract

本发明实施例提供了一种web编辑器中实时标注和***异形对象的方法及装置,属于数据处理技术领域,该方法包括:获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词;通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表;用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。采用本方案,能够在轻量级的web编辑器中自动对异形对象执行标注和***操作的同时,控制光标自动调整位置。

Description

web编辑器中实时标注和***异形对象的方法及装置
技术领域
本发明涉及数据处理技术领域,尤其涉及一种web编辑器中实时标注和***异形对象的方法、装置及电子设备。
背景技术
在Web编辑器中,通常提供一系列工具和功能,使用户可以直观地在网页上创建和编辑文本、图像、表格和其他内容。它们可能包括标签管理工具栏、键盘快捷键、撤销和重做功能、自动保存和版本控制等。
此外,一些高级的Web编辑器还支持自定义插件和扩展功能,使用户可以根据需要添加额外的功能和工具。这可以包括实时标注、***tag、mention、link、emoji等特殊元素(异形对象)。
现有的成熟的编辑器在手动标注文本方面比较健全,但可以根据用户的输入自动标注的几乎没有,同时现有的方案中可以手动***链接,视频,图片等,但可以根据用户实时输入的内容进行联想后***的功能基本没有。
现有的方案要想实现这实时标注和***tag,mention,link,emoji这些异形对象,一种是在业务量比较重的完善的文本编辑器中做二次开发,但工作量较大而且还要受文本编辑器提供的API限制。另一种是使用HTML元素中的contenteditable来实现,但这种实现方式中的在***内容中,光标的位置没有一个很好的控制。
受到上述问题的影响,导致web编辑器中实时标注和***异形对象的过程中会出现效率低下的问题。
发明内容
有鉴于此,本发明实施例提供一种web编辑器中实时标注和***异形对象的方法、装置及电子设备,至少部分解决现有技术中存在的问题。
第一方面,本发明实施例提供了一种web编辑器中实时标注和***异形对象的方法,包括:
给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;
通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注;
通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;
通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中;
在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。
根据本公开实施例的一种具体实现方式,所述通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容,包括:
创建一个容器元素,通过所述容器元素来获取当前使用的web编辑器输入的不包含HTML标签的文本内容。
根据本公开实施例的一种具体实现方式,所述把文本内容拆分成单独的词,包括:
通过对内容以空格或换行进行拆分成单个的词,然后对单个的词进行匹配,匹配到后用span标签进行包裹。
根据本公开实施例的一种具体实现方式,所述计算出当前光标的位置,包括:
通过监听内容的变化获取到实施的内容,并获取此时光标的第一位置。
根据本公开实施例的一种具体实现方式,所述计算出当前光标的位置之后,所述方法还包括:
将包裹后的内容重置到容器元素中,并重置光标到第一位置,完成内容的标注和光标的归位。
根据本公开实施例的一种具体实现方式,所述,包括:
用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的结果列出。
根据本公开实施例的一种具体实现方式,所述通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,包括:
用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的异形对象列出。
根据本公开实施例的一种具体实现方式,所述通过计算替换内容与被替换词语之间的长度差值来重置光标的位置,包括:
对比原词和用户选择的异形对象词的长度,通过计算差值,在原来光标的位置的值上加上这个差值后重新计算出光标的位置后重置光标的位置。
第二方面,本发明实施例提供了一种web编辑器中实时标注和***异形对象的装置,包括:
获取模块,用于给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;
拆分模块,用于通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注;
计算模块,用于通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;
更新模块,用于通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中;
替换模块,用于在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。
第三方面,本发明实施例还提供了一种电子设备,该电子设备包括:
至少一个处理器;以及,
与该至少一个处理器通信连接的存储器;其中,
该存储器存储有可被该至少一个处理器执行的指令,该指令被该至少一个处理器执行,以使该至少一个处理器能够执行前述任第一方面或第一方面的任一实现方式中的web编辑器中实时标注和***异形对象的方法。
第四方面,本发明实施例还提供了一种非暂态计算机可读存储介质,该非暂态计算机可读存储介质存储计算机指令,该计算机指令用于使该计算机执行前述第一方面或第一方面的任一实现方式中的web编辑器中实时标注和***异形对象的方法。
第五方面,本发明实施例还提供了一种计算机程序产品,该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序,该计算机程序包括程序指令,当该程序指令被计算机执行时,使该计算机执行前述第一方面或第一方面的任一实现方式中的web编辑器中实时标注和***异形对象的方法。
本发明实施例中的web编辑器中实时标注和***异形对象的方案,包括:给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注;通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中;在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。采用本方案,能够在轻量级的web编辑器中自动对异形对象执行标注和***操作的同时,控制光标自动调整位置。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其它的附图。
图1为本发明实施例提供的一种web编辑器中实时标注和***异形对象的方法流程示意图;
图2为本发明实施例提供的另一种web编辑器中实时标注和***异形对象的方法流程示意图;
图3为本发明实施例提供的web编辑器中实时标注和***异形对象的装置结构示意图;
图4为本发明实施例提供的电子设备示意图。
具体实施方式
下面结合附图对本发明实施例进行详细描述。
以下通过特定的具体实例说明本公开的实施方式,本领域技术人员可由本说明书所揭露的内容轻易地了解本公开的其他优点与功效。显然,所描述的实施例仅仅是本公开一部分实施例,而不是全部的实施例。本公开还可以通过另外不同的具体实施方式加以实施或应用,本说明书中的各项细节也可以基于不同观点与应用,在没有背离本公开的精神下进行各种修饰或改变。需说明的是,在不冲突的情况下,以下实施例及实施例中的特征可以相互组合。基于本公开中的实施例,本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本公开保护的范围。
需要说明的是,下文描述在所附权利要求书的范围内的实施例的各种方面。应显而易见,本文中所描述的方面可体现于广泛多种形式中,且本文中所描述的任何特定结构及/或功能仅为说明性的。基于本公开,所属领域的技术人员应了解,本文中所描述的一个方面可与任何其它方面独立地实施,且可以各种方式组合这些方面中的两者或两者以上。举例来说,可使用本文中所阐述的任何数目个方面来实施设备及/或实践方法。另外,可使用除了本文中所阐述的方面中的一或多者之外的其它结构及/或功能性实施此设备及/或实践此方法。
还需要说明的是,以下实施例中所提供的图示仅以示意方式说明本公开的基本构想,图式中仅显示与本公开中有关的组件而非按照实际实施时的组件数目、形状及尺寸绘制,其实际实施时各组件的型态、数量及比例可为一种随意的改变,且其组件布局型态也可能更为复杂。
另外,在以下描述中,提供具体细节是为了便于透彻理解实例。然而,所属领域的技术人员将理解,可在没有这些特定细节的情况下实践所述方面。
本公开实施例提供一种web编辑器中实时标注和***异形对象的方法。本实施例提供的web编辑器中实时标注和***异形对象的方法可以由一计算装置来执行,该计算装置可以实现为软件,或者实现为软件和硬件的组合,该计算装置可以集成设置在服务器、终端设备等中。
参见图1及图2,本公开实施例提供了一种web编辑器中实时标注和***异形对象的方法,包括:
S101,给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容。
Web编辑器不同于文本编辑器,它具有所见即所得的功能,可以直观地在网页上创建和编辑文本、图像、表格和其他内容。同时,Web编辑器还支持标签管理工具栏、键盘快捷键、撤销和重做功能、自动保存和版本控制等功能。一些高级的Web编辑器还支持自定义插件和扩展功能,使用户可以根据需要添加额外的功能和工具。
为当前使用的Web编辑器分配一个唯一的ID,可以方便对其进行标识和管理,为Web编辑器分配ID可以包括如下步骤:
首先,确定当前使用的Web编辑器的名称或标识符。以便于在代码中引用的编辑器元素的ID或类名。
创建一个唯一的ID,可以使用编辑器名称或标识符与一些附加信息组合而成。例如,可以将编辑器名称与当前时间戳或随机数组合起来,以确保ID的唯一性。
将生成的ID分配给Web编辑器元素。在HTML代码中,可以将ID属性添加到编辑器元素上,例如:
<textarea id="my-editor-id"></textarea>
或者,如果使用的是类名,则可以将类名设置为编辑器元素的类属性:
<textarea class="my-editor-class"></textarea>
在需要访问或操作Web编辑器的地方,可以使用JavaScript或服务器端语言通过ID或类名来引用编辑器元素。例如,在JavaScript中,可以使用以下代码来获取具有特定ID的文本区域元素:
var editor = document.getElementById("my-editor-id");
或者,如果使用的是类名,则可以使用以下代码:
var editor = document.getElementsByClassName("my-editor-class")[0];
通过分配唯一的ID或类名,可以方便地标识和管理当前使用的Web编辑器。
document.getElementById().innerText 是JavaScript 的 DOM 操作方法,用于获取指定 HTML 元素的文本内容。首先通过 document.getElementById() 获取到具有指定 ID 的 HTML 元素,然后使用 .innerText 属性来获取或设置这个元素的文本内容。
S102,通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注。
可以通过设置函数来对文本内容进行拆分,例如,可以使用split()函数来通过空格或换行符拆分文本内容。
示例性的,对文本内容按照空格进行拆分,可以是:
split_text = text.split() # 根据空格拆分文本
对文本内容根据换行符进行拆分,可以是:
split_text = text.split('\n') # 根据换行符拆分文本
上述例子中,split()函数返回一个列表,其中包含被拆分的文本内容的字符串。
对于每个拆分得到的词或词组,可以进行必要的预处理。这可能包括去除停用词(如“的”、“是”、“了”等)、词干提取或词形还原等。
对于每个预处理后的词或词组,可以通过tag、link、mention的规则对拆分形成的词进行匹配检索,使用相应的规则进行匹配。这些规则可以基于正则表达式、模式匹配或其他文本处理技术。
对于标签(tag),可以使用正则表达式来匹配以“#”开头的单词。例如,可以使用正则表达式r'#(\w+)'来匹配标签,其中\w+表示一个或多个字母数字字符。
对于链接(link),可以使用正则表达式来匹配以“http://”或“https://”开头的网址。例如,可以使用正则表达式r'(\w+://\S+)'来匹配链接,其中\w+://表示以“http://”或“https://”开头,\S+表示一个或多个非空格字符。
对于提及(mention),可以使用正则表达式来匹配以“@”开头的单词。例如,可以使用正则表达式r'(@\w+)'来匹配提及,其中@表示以“@”开头,\w+表示一个或多个字母数字字符。
将匹配到的结果存储起来,可以使用列表、字典或其他数据结构来存储结果,以便于将匹配到的词使用新的HTML标签进行包裹标注。
如果你想将匹配到的词使用新的HTML标签进行包裹标注,你可以使用HTML的<span>标签来实现。<span>标签可以在HTML中用于对文本进行分组或应用样式。
可以使用Python和BeautifulSoup库来将匹配到的标签、链接和提及使用新的HTML标签进行包裹标注,例如:
text = "待处理的文本#tag1 #tag2 @user1 and http://example.com aresome links"
# 定义标签、链接和提及的匹配规则
tag_pattern = r'\b#(\w+)\b'
link_pattern = r'\b(\w+)\b\s*(\w+://\S+)'
mention_pattern = r'\b(@\w+)\b'
# 使用BeautifulSoup初始化一个空对象
soup = BeautifulSoup("", "html.parser")
# 将文本拆分为词语
words = re.findall(r'\b\w+\b', text)
# 遍历每个词,并使用BeautifulSoup创建新的span标签
for word in words:
# 检查是否匹配标签、链接或提及的规则
if re.match(tag_pattern, word):
# 创建新的span标签并添加类名
span = soup.new_tag("span")
span.attrs["class"] = "tag"
span.string = word
# 将span标签添加到父节点中
soup.body.append(span)
elif re.match(link_pattern, word):
# 创建新的span标签并添加类名
span = soup.new_tag("span")
span.attrs["class"] = "link"
span.string = word
# 将span标签添加到父节点中
soup.body.append(span)
elif re.match(mention_pattern, word):
# 创建新的span标签并添加类名
span = soup.new_tag("span")
span.attrs["class"] = "mention"
span.string = word
# 将span标签添加到父节点中
soup.body.append(span)
当然,也可以根据需要自定义样式或进一步处理这些标注的词。
S103,通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置。
可以通过递归遍历一个DOM节点的子节点来计算光标的位置,通过设置函数递归遍历给定节点的所有子节点。每当它找到一个元素节点(nodeType === 1)时,它就会增加计数器。当它找到目标元素有一个特定的id时,它就会返回当前计数器的值,就可以得到光标的位置。
S104,通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中。
具体的,可以通过光标的位置来在用户输入的内容中截取出用户当前正在输入的词,然后对词进行tag等的匹配,匹配中后拿到这个词进行tag,mention等的联想,然后列出联想列表,将标注后的内容通过document.getElementById().innerHTML更新到编辑器中。
S105,在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。
通过上述方案,能够快速的在web编辑器中实时标注、***tag,mention,link,emoji等异形对象,同时自动调整光标的位置。
参见图2,本实施例的另外一种实施方式,还可以包括:
1).先创建一个容器元素
<div contentEditable={true} id="ele">
2).通过监听内容的变化获取到实施的内容,并获取此时光标的位置
3).通过对内容以空格或换行进行拆分成单个的词,然后对单个的词进行匹配,匹配到后用span标签进行包裹
4).将包裹后的内容重置到容器元素中,并重置光标到第二步保存的光标位置。至此完成内容的标注和光标的归位
5).用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的结果列出
6).用户点击某个联想词后,拿到用户选中的联想词在内容的光标位置进行替换原来的词
7).对比原词和用户选择的词的长度,通过计算差值,在原来光标的位置的值上加上这个差值后重新计算出光标的位置后重置光标的位置。
根据本公开实施例的一种具体实现方式,所述通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容,包括:
创建一个容器元素,通过所述容器元素来获取当前使用的web编辑器输入的不包含HTML标签的文本内容。
根据本公开实施例的一种具体实现方式,所述把文本内容拆分成单独的词,包括:
通过对内容以空格或换行进行拆分成单个的词,然后对单个的词进行匹配,匹配到后用span标签进行包裹。
根据本公开实施例的一种具体实现方式,所述计算出当前光标的位置,包括:
通过监听内容的变化获取到实施的内容,并获取此时光标的第一位置。
根据本公开实施例的一种具体实现方式,所述计算出当前光标的位置之后,所述方法还包括:
将包裹后的内容重置到容器元素中,并重置光标到第一位置,完成内容的标注和光标的归位。
根据本公开实施例的一种具体实现方式,所述,包括:
用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的结果列出。
根据本公开实施例的一种具体实现方式,所述通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,包括:
用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的异形对象列出。
根据本公开实施例的一种具体实现方式,所述通过计算替换内容与被替换词语之间的长度差值来重置光标的位置,包括:
对比原词和用户选择的异形对象词的长度,通过计算差值,在原来光标的位置的值上加上这个差值后重新计算出光标的位置后重置光标的位置。
与上面的方法实施例相对应,参见图3,本发明实施例还公开了一种web编辑器中实时标注和***异形对象的装置30,包括:
获取模块301,用于给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;
拆分模块302,用于通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注;
计算模块303,用于通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;
更新模块304,用于通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中;
替换模块305,用于在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。
参见图4,本发明实施例还提供了一种电子设备60,该电子设备包括:
至少一个处理器;以及,
与该至少一个处理器通信连接的存储器;其中,
该存储器存储有可被该至少一个处理器执行的指令,该指令被该至少一个处理器执行,以使该至少一个处理器能够执行前述方法实施例中web编辑器中实时标注和***异形对象的方法。
本发明实施例还提供了一种非暂态计算机可读存储介质,该非暂态计算机可读存储介质存储计算机指令,该计算机指令用于使该计算机执行前述方法实施例中。
本发明实施例还提供了一种计算机程序产品,该计算机程序产品包括存储在非暂态计算机可读存储介质上的计算程序,该计算机程序包括程序指令,当该程序指令被计算机执行时,使该计算机执行前述方法实施例中的web编辑器中实时标注和***异形对象的方法。
下面参考图4,其示出了适于用来实现本公开实施例的电子设备60的结构示意图。本公开实施例中的电子设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的电子设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图4所示,电子设备60可以包括处理装置(例如中央处理器、图形处理器等)601,其可以根据存储在只读存储器(ROM)602中的程序或者从存储装置608加载到随机访问存储器(RAM)603中的程序而执行各种适当的动作和处理。在RAM 603中,还存储有电子设备60操作所需的各种程序和数据。处理装置601、ROM 602以及RAM 603通过总线604彼此相连。输入/输出(I/O)接口605也连接至总线604。
通常,以下装置可以连接至I/O接口605:包括例如触摸屏、触摸板、键盘、鼠标、图像传感器、麦克风、加速度计、陀螺仪等的输入装置606;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置607;包括例如磁带、硬盘等的存储装置608;以及通信装置609。通信装置609可以允许电子设备60与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的电子设备60,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置609从网络上被下载和安装,或者从存储装置608被安装,或者从ROM 602被安装。在该计算机程序被处理装置601执行时,执行本公开实施例的方法中限定的上述功能。
以上所述,仅为本发明的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,可轻易想到的变化或替换,都应涵盖在本发明的保护范围之内。因此,本发明的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种web编辑器中实时标注和***异形对象的方法,其特征在于,包括:
给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;
通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注;
通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;
通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中;
在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。
2.根据权利要求1所述的方法,其特征在于,所述通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容,包括:
创建一个容器元素,通过所述容器元素来获取当前使用的web编辑器输入的不包含HTML标签的文本内容。
3.根据权利要求2所述的方法,其特征在于,所述把文本内容拆分成单独的词,包括:
通过对内容以空格或换行进行拆分成单个的词,然后对单个的词进行匹配,匹配到后用span标签进行包裹。
4.根据权利要求3所述的方法,其特征在于,所述计算出当前光标的位置,包括:
通过监听内容的变化获取到实施的内容,并获取此时光标的第一位置。
5.根据权利要求4所述的方法,其特征在于,所述计算出当前光标的位置之后,所述方法还包括:
将包裹后的内容重置到容器元素中,并重置光标到第一位置,完成内容的标注和光标的归位。
6.根据权利要求5所述的方法,其特征在于,所述,包括:
用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的结果列出。
7.根据权利要求6所述的方法,其特征在于,所述通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,包括:
用光标的位置值在获取到的内容中截取当前光标位置所在的词,判断这个词是tag或者mention并去请求联想词接口,将请求到的异形对象列出。
8.根据权利要求7所述的方法,其特征在于,所述通过计算替换内容与被替换词语之间的长度差值来重置光标的位置,包括:
对比原词和用户选择的异形对象词的长度,通过计算差值,在原来光标的位置的值上加上这个差值后重新计算出光标的位置后重置光标的位置。
9.一种web编辑器中实时标注和***异形对象的装置,其特征在于,包括:
获取模块,用于给当前使用的web编辑器分配id,通过document.getElementById().innerText获取用户在当前使用的web编辑器输入的不包含HTML标签的文本内容;
拆分模块,用于通过空格或换行对文本内容进行拆分,把文本内容拆分成单独的词,通过tag、link、mention的规则对拆分形成的词进行匹配检索,将匹配到的词使用新的HTML标签进行包裹标注;
计算模块,用于通过对编辑器中的childNodes子节点进行递归遍历,计算出当前光标的位置;
更新模块,用于通过光标的当前位置来在用户输入的内容中截取出用户当前正在输入的词,然后对正在输入的词进行异形对象匹配,得到正在输入的词所对应的异形对象联想列表,对异形对象联想列表中的内容进行标注操作,并将标注后的异形对象联想列表中的内容通过document.getElementById().innerHTML更新到编辑器中;
替换模块,用于在用户选择异形对象联想列表中的内容后,用异形对象联想列表中的内容替换当前的词来实现***,并通过计算替换内容与被替换词语之间的长度差值来重置光标的位置。
10.一种电子设备,其特征在于,所述电子设备包括:
至少一个处理器;以及,
与所述至少一个处理器通信连接的存储器;其中,
所述存储器存储有可被所述至少一个处理器执行的指令,所述指令被所述至少一个处理器执行,以使所述至少一个处理器能够执行前述权利要求1-8任一项所述的web编辑器中实时标注和***异形对象的方法。
CN202311475257.8A 2023-11-08 2023-11-08 web编辑器中实时标注和***异形对象的方法及装置 Active CN117195840B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202311475257.8A CN117195840B (zh) 2023-11-08 2023-11-08 web编辑器中实时标注和***异形对象的方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202311475257.8A CN117195840B (zh) 2023-11-08 2023-11-08 web编辑器中实时标注和***异形对象的方法及装置

Publications (2)

Publication Number Publication Date
CN117195840A CN117195840A (zh) 2023-12-08
CN117195840B true CN117195840B (zh) 2024-01-12

Family

ID=88996510

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202311475257.8A Active CN117195840B (zh) 2023-11-08 2023-11-08 web编辑器中实时标注和***异形对象的方法及装置

Country Status (1)

Country Link
CN (1) CN117195840B (zh)

Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7325188B1 (en) * 2003-09-03 2008-01-29 Microsoft Corporation Method and system for dynamically capturing HTML elements
CN116384347A (zh) * 2023-04-06 2023-07-04 四三九九网络股份有限公司 一种富文本编辑方法

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7890852B2 (en) * 2003-06-26 2011-02-15 International Business Machines Corporation Rich text handling for a web application
US8356247B2 (en) * 2008-12-16 2013-01-15 Rich Media Worldwide, Llc Content rendering control system and method
US9495342B2 (en) * 2012-09-05 2016-11-15 Salesforce.Com, Inc. System and method for automatically inserting correct escaping functions for field references in a multi-tenant computing environment
US9201852B2 (en) * 2013-05-24 2015-12-01 David Wei Ge Method for in-browser visual HTML editing via bi-directional navigation and virtual properties

Patent Citations (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US7325188B1 (en) * 2003-09-03 2008-01-29 Microsoft Corporation Method and system for dynamically capturing HTML elements
CN116384347A (zh) * 2023-04-06 2023-07-04 四三九九网络股份有限公司 一种富文本编辑方法

Also Published As

Publication number Publication date
CN117195840A (zh) 2023-12-08

Similar Documents

Publication Publication Date Title
KR101824222B1 (ko) 동적 컨텐츠 및 스테일 컨텐츠를 포함하는 웹사이트들의 고속 렌더링
US10078709B2 (en) Managing a display of results of a keyword search on a web page by modifying attributes of a DOM tree structure
US8843360B1 (en) Client-side localization of network pages
US20170068655A1 (en) System for Tokenizing Text in Languages without Inter-Word Separation
CN110851757A (zh) 页面资源加载方法及终端
US8745027B1 (en) Jslayout cascading style sheets optimization
US11403078B2 (en) Interface layout interference detection
CN111258577B (zh) 页面渲染方法、装置、电子设备和存储介质
CN110020312B (zh) 提取网页正文的方法和装置
US10755091B2 (en) Method and apparatus for retrieving image-text block from web page
US20190050399A1 (en) Distinguish phrases in displayed content
CN111294395A (zh) 一种终端页面传输方法、装置、介质和电子设备
CN115599386A (zh) 代码生成方法、装置、设备及存储介质
CN113360106B (zh) 一种网页打印方法和装置
CN113495730A (zh) 资源包的生成及解析方法和装置
CN117195840B (zh) web编辑器中实时标注和***异形对象的方法及装置
US20210397663A1 (en) Data reduction in a tree data structure for a wireframe
WO2018040807A1 (zh) 一种前端辅助转码的浏览方法和装置
US8578268B2 (en) Rendering electronic documents having linked textboxes
CN105808628A (zh) 网页转码方法、装置及***
CN109726346B (zh) 页面组件处理方法及装置
WO2019108464A1 (en) Preview of downloadable fonts
CN113609309B (zh) 知识图谱构建方法、装置、存储介质及电子设备
CN111310016A (zh) 标签挖掘方法、装置、服务器和存储介质
CN108334560B (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