撇号富文本锚名称并以编程方式向 CKEditor 中的元素添加属性

Question

我的问题是撇号富文本中的锚点在 html 中产生了一个不起作用的标记。

我的撇号富文本有以下设置：

'apostrophe-rich-text': {
    toolbar: [
        'Styles',
        'Bold',
        'Italic',
        'Blockquote',
        'BulletedList',
        'Link',
        'Anchor',
        'Table'
  ],
    styles: [
        { name: 'Default', element: 'p' }
  ]
}

我一般使用更多的 styles 但不想在这里全部列出。 除了Anchor之外，一切都按预期工作。

Anchor 在 html 中产生这个。

<p>Lorem ipsum dolor <a name="section-one">incididunt</a> qui officia deserunt</p>

这显然是行不通的。 我做错了什么还是这是一个错误？

也有可能 select “链接”并在“链接类型”的下拉菜单中选择“锚点”，不幸的是我的锚点无法识别，我只收到消息“（文档中没有锚点）”。

我使用 dropdwon 菜单进行页面导航，锚点肯定在那里。 你可以在这里看到它。

此外，我想将 class 添加到所有 a 元素，并且出于性能和安全原因rel="noopener noreferrer"到所有外部链接。

Answer 1

为什么那行不通？ 使用name属性不是当前推荐的做法，但它应该仍然有效。 编辑器可能会使用它，因为它是 CKEditor 的旧版本。

对于anchor-jump ，您可以像任何其他文本样式一样为其添加文本样式。 更新锚点工具按钮可能是可能的，但这将涉及自定义 CKEditor 插件代码。

根据我的经验，链接工具可以很好地找到锚点。 它可能特定于使用name属性而不是id ，但我不确定。

Answer 2

我能够用一个非常好的解决方案修改 CKEDITOR 实例。 有了这个，您可以以编程方式将几乎任何东西添加到任何元素。

如全局 CKeditor 配置部分所述，我添加了以下内容：

// lib/modules/apostrophe-areas/public/js/user.js

apos.define('apostrophe-areas', {
  construct: function(self, options) {
    // Use the super pattern - don't forget to call the original method
    var superEnableCkeditor = self.enableCkeditor;
    self.enableCkeditor = function() {
      superEnableCkeditor();
      // Now do as we please
      CKEDITOR.on('instanceReady', function(ev) {
        var editor = ev.editor;
        editor.dataProcessor.htmlFilter.addRules({
          elements : {
            // Add attributes to a
            a : function( element ) {
              // Add accent-color class to all links
              if ( !element.attributes.class ){
                element.attributes.class = 'accent-color';
              }
              // Add _blank and noopener and noreferrer to external links
              if ( !element.attributes.rel ){
                // Get content's a href values
                var url = element.attributes.href;
                // Extract host names from URLs (IE safe)
                var parser = document.createElement('a');
                parser.href = url;
                // Set additional attributes
                var hostname = parser.hostname;
                if ( hostname !== window.location.host) {
                    element.attributes.rel = 'noopener noreferrer';
                    element.attributes.target = '_blank';
                }
              }
            }
          }
        });
      })
    };
  }
});

对于rel属性，我当然必须使用allowedAttributes方法来允许它：

// lib/modules/apostrophe-rich-text-widgets/index.js

// Changing the allowed HTML tags in rich text widgets
module.exports = {
  sanitizeHtml: {
    allowedTags: [
      'h2', 'h3', 'h4', 'p', 'a', 'ul', 'ol', 'li', 'strong', 'em', 'blockquote', 'iframe'
    ],
    allowedAttributes: {
      '*': ['style', 'class'],
      a: [ 'style', 'name', 'href', 'target', 'rel', 'class' ]
    },
    allowedSchemes: ['http', 'https', 'ftp', 'mailto', 'tel']
  }
};

这为 Apostrophe 中使用的 CKEditor 增加了很大的灵活性，并且对于应该以编程方式将属性添加到元素的各种情况非常有用。