apostrophe-rich-text锚点失效及CKEditor元素属性编程式添加问题

问题原因及解决方案 #

1. 锚点不生效、编辑器无法识别锚点的问题 #

Apostrophe富文本编辑器底层基于CKEditor4实现，默认配置生成的锚点仅携带已被HTML5废弃的name属性，同时Apostrophe默认的HTML安全清理规则会过滤掉<a>标签的id属性，是导致两个问题的核心原因。
你需要修改富文本配置如下：

'apostrophe-rich-text': {
    toolbar: [
        'Styles',
        'Bold',
        'Italic',
        'Blockquote',
        'BulletedList',
        'Link',
        'Anchor',
        'Table'
  ],
    styles: [
        { name: 'Default', element: 'p' }
  ],
  // 新增CKEditor自定义配置
  ckeditor: {
    // 锚点生成符合HTML5规范的id属性
    anchor_showId: true,
    // 关闭废弃的name属性生成，如有历史兼容需求可保留为true
    anchor_showName: false
  },
  // 放开Apostrophe对a标签的属性过滤限制
  allowedAttributes: {
    a: ['href', 'name', 'id', 'class', 'rel', 'target']
  }
}

修改配置后重新添加的锚点会自动携带id属性，既可以正常实现页内跳转，也可以被编辑器的锚点链接选择器正常识别。之前已添加的旧锚点需要删除后重新添加即可生效。

2. 自定义class、外部链接自动加rel属性的实现 #

在上述ckeditor配置项中补充以下参数即可自动实现需求，无需手动修改每个链接：

ckeditor: {
  // 原有配置保留，新增以下参数
  // 所有a标签默认添加的自定义class，多个类用空格分隔
  linkDefaultClasses: '你需要的自定义类名',
  // 所有外部链接默认添加rel属性
  linkDefaultRel: 'noopener noreferrer',
  // 识别外部链接自动配置规则，无需手动勾选
  linkTargetIsExternal: true
}

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