如何为SummerNote编辑器中所有外部链接自动添加rel="nofollow"属性？

我之前在项目里也碰到过SummerNote这个外链属性的问题，整理了几个实用的解决办法，你可以试试：

这是最直接的方式，当用户在编辑器里插入链接时，自动给外部链接加上rel="nofollow"（还可以顺便加上安全属性）。代码示例：

$('#summernote').summernote({
  callbacks: {
    onLinkInsert: function(url, node) {
      // 判断是否为外部链接，这里用开头是否含http作为简单判断，你可以按需调整规则
      if (url.startsWith('http')) {
        // 同时添加nofollow、noopener、noreferrer提升安全性
        $(node).attr('rel', 'nofollow noopener noreferrer');
      }
    }
  }
});

这个方法的优势是实时响应用户操作，不会干扰已有的编辑内容，适合处理新插入的链接。

如果编辑器加载了历史HTML内容，需要给里面的外链也补上属性，可以在初始化回调里做批量处理：

$('#summernote').summernote({
  callbacks: {
    onInit: function() {
      // 遍历编辑器内所有<a>标签
      $(this).find('a').each(function() {
        const linkHref = $(this).attr('href');
        // 只处理外部链接，可根据域名排除自有链接
        if (linkHref && linkHref.startsWith('http') && !linkHref.includes('你的域名.com')) {
          $(this).attr('rel', 'nofollow noopener noreferrer');
        }
      });
    }
  }
});

如果你想完全掌控链接插入的流程，可以重写链接弹窗的确认按钮事件，从源头处理链接属性：

// 先正常初始化编辑器
$('#summernote').summernote();

// 监听链接弹窗的确认按钮点击事件
$(document).on('click', '.note-link-btn', function() {
  const urlInput = $('.note-link-url');
  const targetUrl = urlInput.val();
  
  if (targetUrl && targetUrl.startsWith('http')) {
    const editor = $('#summernote').summernote('editor');
    const selectionRange = editor.createRange();
    
    if (selectionRange.isCollapsed()) {
      // 插入新链接：创建带属性的<a>标签并插入
      const newLink = $('<a>')
        .attr('href', targetUrl)
        .attr('rel', 'nofollow noopener noreferrer')
        .text(targetUrl);
      selectionRange.insertNode(newLink[0]);
    } else {
      // 修改已有链接：给选中的链接节点添加属性
      const existingLink = selectionRange.commonAncestor().closest('a');
      if (existingLink.length) {
        existingLink.attr('href', targetUrl).attr('rel', 'nofollow noopener noreferrer');
      }
    }
    
    // 手动关闭弹窗
    $('.note-modal').modal('hide');
    return false; // 阻止默认的弹窗提交逻辑
  }
});

小提示 #

• 外部链接的判断规则可以灵活调整，比如排除自己的域名，避免给内部链接加nofollow；
• noopener noreferrer是额外的安全属性，能防止第三方页面窃取页面控制权，建议和nofollow一起添加。

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