如何禁用Froala编辑器链接插件自定义文本并忽略选中文本？

针对你的需求（无论是否选中文本，插入链接时都以完整URL作为显示文本，且不替换选中内容，仅将链接插入到选中文本之后），可以通过Froala的事件监听结合linkText: false设置实现，具体方案如下：

核心实现代码 #

new FroalaEditor('#your-editor-selector', {
  linkText: false, // 隐藏链接弹窗的文本输入框
  events: {
    // 拦截链接插入前的动作，强制将显示文本设为URL
    'link.beforeInsert': function(linkUrl, originalText) {
      // 返回数组：[链接地址, 显示文本]，强制用URL作为显示文本
      return [linkUrl, linkUrl];
    },
    // 打开链接弹窗时，保存当前选区并清除选中状态
    'link.showPopup': function() {
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        // 保存当前选区位置
        this.selection.save();
        // 清除选中，避免原有文本被替换为链接
        selection.removeAllRanges();
      }
    },
    // 链接插入完成后，将光标恢复到链接后方
    'link.inserted': function() {
      this.selection.restore();
      const range = document.createRange();
      const selection = window.getSelection();
      // 获取刚插入的链接元素
      const latestLink = this.el.querySelector('a:last-child');
      
      if (latestLink) {
        // 将光标定位到链接末尾
        range.setStartAfter(latestLink);
        range.collapse(true);
        selection.removeAllRanges();
        selection.addRange(range);
      }
    }
  }
});

方案说明 #

1. linkText: false：保留你原有的设置，隐藏链接弹窗中的文本输入字段，用户仅能输入URL。
2. link.beforeInsert事件：关键拦截点，无论操作前是否有选中文本，都强制将链接的显示文本替换为输入的URL，彻底避免自定义文本链接生成。
3. link.showPopup事件：打开链接弹窗时，先保存当前选区位置，再清除选中状态，确保插入的链接不会替换原有选中内容，而是插入到原选区位置之后。
4. link.inserted事件：优化用户体验，插入链接后自动将光标移动到链接末尾，方便后续编辑。

该方案适配Froala Editor 4.0.11版本，既保留链接插件功能（便于通过CSS设置链接样式），又完全满足生成<a href="url">url</a>格式链接的需求，同时阻断了用户通过选中文本绕过设置的操作。

内容的提问来源于stack exchange，提问作者awe