如何扩展撇号富文本小部件样式答案

【问题标题】：How to extend Apostrophe Rich Text Widget Styles如何扩展撇号富文本小部件样式
【发布时间】：2019-02-21 17:26:33
【问题描述】：

我正在尝试在 Apostrophe 中扩展富文本小部件样式，但它不起作用。

在 home.html 中

{ apos.area(data.page, 'body', {

        widgets: {
            'apostrophe-rich-text': {
                toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 
                                   'Unlink'],
                styles: [
                    { name: 'Heading', element: 'h2'},
                    { name: 'Subheading', element: 'h3'},
                    { name: 'Paragraph', element: 'p'}
                ]
            }
            }
    }) }}

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

module.exports = {
  // The standard list copied from the module, plus sup and sub

  sanitizeHtml: {

    allowedTags: [ 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 
                   'ul', 'ol', 'li', 'b', 'i', 'strong', 'em', 'strike', 
                   'code', 'hr', 'br', 'div', 'table', 'thead', 'caption', 
                   'tbody', 'tr', 'th', 'td', 'pre', 'sup', 'sub'
    ],

    allowedAttributes: {
      a: [ 'href', 'name', 'target' ],
      // We don't currently allow img itself by default, but this
      // would make sense if we did
      img: [ 'src' ]
    },

    // Lots of these won't come up by default because we don't allow them
    selfClosing: [ 'img', 'br', 'hr', 'area', 'base', 'basefont',
      'input', 'link', 'meta' ],
    // URL schemes we permit
    allowedSchemes: [ 'http', 'https', 'ftp', 'mailto' ],
    allowedSchemesByTag: {}
  }
};

HTML 标记 h3 和 p 可以正常工作，但 h2 的工作方式与 p 类似。是不是我写的不对？

谢谢！

【问题讨论】：

您提到h2 的工作方式与p 类似——您能否准确说明什么是行不通的？你的配置在我看来是正确的
看起来确实正确。 H2 是作为错误标签直接从 CKE 中出来的，还是在刷新/撇号清理后出现错误标签？窥视检查器
当我在导航器中检查页面时，我可以看到它出现的标签是 h2，所以我认为 H2 标签是来自 CKE 的错误标签。
听起来您需要检查应用于 h2 标签的样式。如果在您选择标题时正确输出了 h2 标签，那么听起来 CKE 正在正确地完成其工作 - 如果我理解正确，似乎某处有 CSS 正在影响您的 h2 标签并使其看起来像一个 p 标签。
我检查了它，正在应用的样式是位于 apostrophe-assets/public/css/utils/ 中的 reset.less 文件。如何检查 CKE 是否正常工作？

标签： apostrophe-cms

【解决方案1】：

我修复了它，为 h2 标签添加了一个样式。我注意到 h3 在 site.less

中有自己的风格

h3 {
    font-size: 24px;
    margin-bottom: 12px;
  }

  h4 {
    font-size: 20px;
    margin-bottom: 10px;
  }

  strong { font-weight: bold; }
  em { font-style: italic; }

所以我将我想要的样式添加到我的 h2 标记中，并且它起作用了。

【讨论】：