PageKit — 可自托管的 GrapesJS 建站工具,附完整源码。 获取抢先体验

问题 #6263💬 已回答提出于 2024年10月24日作者 yashvi20261 个反应

重复链接通过RTE添加

快速解答作者 sirbeagle❤ 1

点燃——唯一的坏处是我们可能永远不知道最终的修复结果。 @artf - 我觉得我们可以结束这个问题了。

阅读下方完整回答 ↓

问题

GrapesJS 版本

  • 我确认使用最新版本 GrapesJS

你用的是什么浏览器?

铬

可复制演示链接

https://codepen.io/Harshsne/pen/xxoOyXO

描述一下那个虫子

如何复现这个漏洞?

  1. 使用 RTE 添加词语链接,添加链接组件
  2. 现在在链接组件后输入一个不留空格的词,再次选择该词,添加链接。
  3. 添加后,点击文本框外。

预期的行为是什么? 第二个新增链接应包裹在第一个链接和文本上。

目前的行为是什么? 新增了两链接组件。

代码 var url = window.prompt('Enter the URL to link to:'); rte.insertHTML(<a class="link" href=${url}>${rte.selection()}</a>);

![EDI11](https://github.com/user-attachments/assets/f1c6f0a4-b355-45df-8dcf-137777374fdf)

行为准则

  • 我同意遵守本项目的行为准则

回答(4)

sirbeagle• 2025年2月27日

点燃——唯一的坏处是我们可能永远不知道最终的修复结果。

@artf - 我觉得我们可以结束这个问题了。

sirbeagle• 2025年2月26日

我已经玩了不少,能在@yashvi2026提供的Codepen上重现出这个错误。我大多数情况下的繁殖步骤非常相似: 在文本框中输入两个单词,中间有许多空格。 双击单词或用鼠标手动选择单词,选中第一个单词 使用自定义RTE添加链接 跳出框框点击 在现有文本中的链接后双击返回 在链接后高亮单词,并用鼠标将高亮扩展为包含第一个链接的首字母 使用 RTE 添加另一个链接 点击文本框外 然而,我在开发环境中无法复现这种效果。经过多次反复试验,我发现Codepen使用的是GrapesJS v0.22.1。我把它切换到v0.22.4(Codepen能找到的最新版本),结果再也复现不了。 @yashvi20...

yashvi2026• 2025年2月27日

是的,升级到最新版本后,这个问题就不出现了。

GJS Helper• 2026年5月17日

你在使用 rte.insertHTML 时遇到的重复链接组件问题是一个常见的混淆点,但这不是 GrapesJS 或其底层 ProseMirror 编辑器的漏洞。而是 rte.insertHTML 与编辑器内置标记管理命令的操作方式相较的结果。 根本原因解释 HTML <a> 标签嵌套: 你期望的行为(“第二个添加链接应包裹在第一个链接和文本上”)未被满足的根本原因是 HTML <a>(锚)标签无法嵌套。像 <a>Link1<a>Link2</a></a> 这样的 HTML 结构是无效的。当你有相邻的文本段且都是链接时,它们自然会被表示为两个独立的相邻 <a> 标签:<a>Link1</a><...

相关问答

通过相似的问题讨论继续研究。

与此问题匹配的付费插件

根据问题关键词和标签相关性精选,助你更快交付。

查看全部插件

正在加载付费插件推荐……

免费方案

在以下平台查看开源 GrapesJS 插件: GitHub 或在我们的免费目录中快速搜索。

浏览免费插件 →
高级方案

高级插件提供支持、定期更新和生产就绪的功能——为你节省数天的集成工作。

浏览高级插件 →

相关教程

关于同一主题的深入指南。

全部教程 →

浏览插件分类

直接跳转到市场上的插件分类页面。