CODEWITHSUNDEEP
node.jsapostrophe-cms
trondulseth
trondulseth

Reputation: 87

Apostrophe cms - rich text preview not working in admin view

In a custom content type (employees) I have a body field.

In lib\modules\employees\index.js

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

And in lib\modules\employees-widgets\views\widget.html

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

Editing directly on the page shows the rich text field with toolbar and preview. But in the admin view the toolbar shows, but the preview is not working at all. Look at the images linked bellow:

It looks like this when editing on the page

It looks like this in the admin view

Upvotes: 1

Views: 295

Answers (2)

trondulseth
trondulseth

Reputation: 87

If anyone should have the same question, Stuarts answer is correct (of course). Here is what I added in lib\modules\apostrophe-assets\public\css\site.less to make it work for me. You might want to add more options or adjust to taste :)

.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;
        }
    }
}

Upvotes: 0

Stuart Romanek
Stuart Romanek

Reputation: 2157

Apostrophe's admin modal CSS is reset, so rich text areas in the modal do not reflect project level styles. This is in an attempt to keep project level styles from interfering with important Apostrophe UI.

You could always add those admin scopes to your project level CSS, just be aware of its reach.

Upvotes: 1

Related Questions