撇号富文本小部件样式

Question

一段时间以来，apostrophe-rich-text 小部件一直存在一个小问题。出于某种原因，在编辑富文本小部件时唯一保存的配置选项是元素类型，甚至在某些时候也是如此。我现在设置了 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 文档），元素类型已保存并正确显示，但 class 未应用于元素。在第 4 个示例中，元素类型或 class 都没有在页面重新加载时正确应用（它似乎默认返回到 "Heading" 样式）。最后 3 个根本没有保存 - 样式在重新加载之前显示，但在重新加载之后，它们默认为标题样式。

是否有什么我没有正确配置以使这些样式 saved/applied 正确？

谢谢！

Answer 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 的自述文件以更好地理解其默认值和其他配置 https://github.com/punkave/sanitize-html

撇号富文本小部件样式

Apostrophe Rich Text Widget Styles

apostrophe-cms