撇号 CMS 和富文本

Question

我正在尝试获取一个段落标签，其中包含一个由富文本小部件生成的类，但我尝试过的任何方法似乎都不起作用。那里有很多半解决方案，但没有一个文档提供完整的解决方案。

这就是我想要的：我想在富文本编辑器中有一个菜单选项，它是“突出显示的文本”，并使用带有“突出显示文本”类的“p”标签<p class='highlighted-text'>...</p>。

我有什么：

我的项目中有一个lib\modules\apostrophe-rich-text-widgets\index.js 文件，其中包含：

module.exports = {
    sanitizeHtml: {
        //allowedTags: [ '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'
        //],
        //allowedClasses: {
        //  'p': ['highlighted-text']
        //},
        //allowedAttributes: {
        //  '*': ['style', 'class'],
        //  a: [ 'href', 'name', 'target' ],
        //  // We don't currently allow img itself by default, but this
        //  // would make sense if we did
        //  img: [ 'src' ]
        //},
        allowedTags: false,
        allowedAttributes: false,
        allowedClasses: false,
        // 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: {}
    }
}

请注意，我已经尝试过专门允许段落标记的类，并且我还尝试按照此处的说明关闭清理：https://github.com/apostrophecms/sanitize-html

在我的模板中，我有以下代码：

{% extends "layout.html" %}

{% block main %}
    <div class="container" style="margin-top: 3rem">
    {{ apos.area(data.page, "body", {
        widgets: {
            'apostrophe-images': {size: 'one-half'},
            'apostrophe-rich-text': {
                toolbar: ['Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Anchor', 'Table', 'BulletedList', 'Blockquote', 'Strike', 'Subscript', 'Superscript', 'Split'],
                styles: [
                    {name: 'Paragraph', element: 'p'},
                    {name: 'Heading 2', element: 'h2'},
                    {name: 'Heading 3', element: 'h3'},
                    {name: 'Heading 4', element: 'h4'},
                    {name: 'Heading 5', element: 'h5'},
                    {name: 'Highlighted-Text', element: 'p', 'class': 'highlighted-text'}
                ]
            },
            'apostrophe-files': {},
            'two-column': {}
        }
    }) }}
    </div>
{% endblock %}

我也尝试过{name: 'Highlighted-Text', element: 'p', attributes: [{'class': 'highlighted-text'}]} 和{name: 'Highlighted-Text', element: 'p', attributes: {'class': 'highlighted-text'}}，因为这些也是我在网络上流传的文档中看到的格式。

到目前为止，我要么在服务器上遇到错误，要么得到纯段落格式。我确信我还没有设法尝试这些设置的可能变化的所有可能排列，因为那几乎是无限的。

我建议将一个简单的工作示例添加到官方撇号文档中，以展示这一点，包括必须从默认撇号 cms 项目添加或更改的所有代码片段。我猜这是用户非常普遍的需求。

Answer 1

我最初忽略的第一步（参见更新）是您的模板代码没有正确设置类。在模板styles 选项中，应将类添加为attributes: { class: 'highlighted-text' }，而不仅仅是class: 'highlighted-text'。所以模板中的apostrophe-rich-text 小部件配置如下所示：

'apostrophe-rich-text': {
    toolbar: ['Styles', 'Bold', 'Italic', 'Link', 'Unlink', 'Anchor', 'Table', 'BulletedList', 'Blockquote', 'Strike', 'Subscript', 'Superscript', 'Split'],
    styles: [
        {name: 'Paragraph', element: 'p'},
        {name: 'Heading 2', element: 'h2'},
        {name: 'Heading 3', element: 'h3'},
        {name: 'Heading 4', element: 'h4'},
        {name: 'Heading 5', element: 'h5'},
        {
            name: 'Highlighted-Text',
            element: 'p',
            attributes: { class: 'highlighted-text' }
        }
    ]
}, 

如果您特别希望在段落中允许 highlighted-text 类，您应该能够简单地将其用于 lib/modules/apostrophe-rich-text-widgets/index.js 中的项目级配置：

module.exports = {
    sanitizeHtml: {
        allowedClasses: {
         'p': ['highlighted-text']
        }
    }
}

false 可能适用于allowedClasses 允许任何人，但我不确定。但是，还有另一种记录方法允许使用 sanitize-html 的任何类。

您包含的大部分内容是 sanitize-html 默认值。您只需在添加或替换特定配置属性时包含这些默认值。例如，如果您想向allowedTags 添加新标签，如果您不想丢失它们，则需要包含默认值，但如果您不更改任何allowedAttributes，则可以在项目代码中将其省略.

一直缺少这方面的文档，但我最近更新了它们以提供有关此的更多信息：https://docs.apostrophecms.org/howtos/ckeditor.html#changing-the-allowed-html-tags-in-rich-text

更新：我删除了我对 false 设置的评论，因为 OP 在 cmets 中解释了他们的推理。我还添加了我最初遗漏的模板代码建议。