apostrophe-rich-text 锚名称并以编程方式向 CKEditor 中的元素添加属性

Question

我的问题是，撇号富文本中的锚点在 html 中产生了无效标记。

我的撇号富文本设置如下：

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

我一般使用更多样式，但不想在这里一一列出。除 Anchor.

外，一切都按预期进行

Anchor 在 html 中制作了这个。

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

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

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

我使用下拉菜单进行页面导航，锚点肯定在那里。可以看到here.

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

Answer 1

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

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

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

Answer 2

我能够用一个非常好的解决方案修改 CKEDITOR 实例。有了这个，您可以通过编程方式向任何元素添加任何内容。

如 Global CKeditor configuration 部分所述，我添加了以下内容：

// 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 增加了很多灵活性，并且对于应以编程方式将属性添加到元素的各种情况非常有用。

apostrophe-rich-text 锚名称并以编程方式向 CKEditor 中的元素添加属性

apostrophe-rich-text anchor name and adding attributes to elements in CKEditor programmatically

apostrophe-cms