撇号富文本小部件样式答案

【问题标题】：Apostrophe Rich Text Widget Styles撇号富文本小部件样式
【发布时间】：2023-03-28 08:06:01
【问题描述】：

一段时间以来，我在撇号富文本小部件中遇到了一个小问题。出于某种原因，编辑富文本小部件时唯一保存的配置选项是元素类型，即使这样也只有某些时候。我现在设置了 7 个测试配置：

{ name: 'Heading', element: 'h3', class: 'testClass' },
{ name: 'Subheading', element: 'h4', class: 'testClass' },
{ name: 'Paragraph', element: 'p', class: 'testClass' },
{ name: 'Label', element: 'label', class: 'testClass' },
{ name: 'Centered Heading', element: 'h3', styles: { 'text-align': 'center'} },
{ name: 'Centered Subheading', element: 'h4', styles: { 'text-align': 'center'} },
{ name: 'Centered Paragraph', element: 'p', styles: { 'text-align': 'center', 'color': 'red'} }

其中，当在“样式”下拉列表中选择该选项时，它们都会正确显示。但是当页面重新加载时，显然保存的很少。在前 3 个示例中（来自 Apostrophe 文档），元素类型被保存并正确显示，但类并未应用于元素。在第四个示例中，元素类型或类都没有在页面重新加载时正确应用（它似乎默认回到“标题”样式）。最后 3 个根本没有保存 - 样式在重新加载之前显示，但在重新加载之后，它们默认为 Heading 样式。

是否有什么我没有正确配置才能正确保存/应用这些样式？

谢谢！

【问题讨论】：

标签： apostrophe-cms

【解决方案1】：

为富文本配置自定义属性是一个由两部分组成的过程：首先，正如您所做的那样，定义在编辑和编写时应该从 CKEditor 输出什么。第二个是配置sanitize-html 将这些属性列入白名单，以防止它们在保存过程中被删除。

在您的项目级/lib/modules/apostrophe-rich-text-widgets/index.js 中，您可以为sanitize-html 提供配置。

module.exports = {
  ...
  sanitizeHtml: {
    allowedClasses: {
      'p': ['testClass'],
      'h1': ['testClass']
    },
    allowedAttributes: {
      '*': ['style', 'href', 'color']
    }
  }
}

查看 sanitize-html 的 README 以更好地了解其默认值和其他配置 https://github.com/punkave/sanitize-html

【讨论】：