撇号 cms - 富文本预览在管理视图中不起作用

Question

在自定义内容类型（员工）中，我有一个正文字段。

在lib\modules\employees\index.js

addFields: [
   {
        name: 'body',
        label: 'Beskrivelse',
        type: 'area',
        options: {
            widgets: {
                'apostrophe-rich-text': {
                    toolbar: ['Bold', 'Italic', 'Link', 'Unlink']
                }
            }
        }
    }
]

并且在lib\modules\employees-widgets\views\widget.html

{{ apos.singleton(piece, 'body', 'apostrophe-rich-text', {
    toolbar: [ 'Bold', 'Italic', 'Link', 'Unlink' ]
    })
}}

直接在页面上编辑显示带有工具栏和预览的富文本字段。但是在管理视图中工具栏显示，但预览根本不起作用。查看下面链接的图片：

It looks like this when editing on the page

It looks like this in the admin view

Answer 1

Apostrophe 的管理模式 CSS 已重置，因此模式中的富文本区域不会反映项目级样式。这是为了防止项目级样式干扰重要的撇号 UI。

您始终可以将这些管理范围添加到您的项目级别 CSS，只需注意其范围。

Answer 2

如果有人有同样的问题，Stuarts 的回答是正确的（当然）。这是我在 lib\modules\apostrophe-assets\public\css\site.less 中添加的内容，以使其对我有用。您可能想添加更多选项或调整口味:)

.apos-ui {
    .apos-rich-text {
        h1 {
            font-size: 2em;
        }
        h2 {
            font-size: 1.6em;
        }
        h3 {
            font-size: 1.3em;
        }
        h1,
        h2,
        h3 {
            margin: 1em 0;
            font-weight: bold;
        }
        p {
            margin-bottom: 1em;
        }
        a {
            color: darkblue;
        }

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

撇号 cms - 富文本预览在管理视图中不起作用

Apostrophe cms - rich text preview not working in admin view

node.js

apostrophe-cms