This forum has moved, please join us on github discussions. We will keep these old posts available for reference. Thank you!

Using Styles with a Rich Text Widget

#1

I am trying to configure a rich text widget with the following configuration:

            {{
                apos.singleton(data.page, 'AboutText', 'apostrophe-rich-text', {
                        toolbar: ['Styles', 'Blockquote', 'Bold', 'Italic', 'Link', 'BulletedList'],
                        styles: [
                            {name: 'Title', element: 'h2'}
                        ]
                    }
                )
            }}

However, when I go to add text, the widget defaults to using that one style, and I am having a very difficult time trying to create normal text.

Is this working correctly? How do I make the styles optional?

#2

Upon further review, I can toggle the one style more easily when using apos.area rather than a singleton. However the style doesn’t save. The style is applied when logged in, but when refreshing the page, the text that I applied the style to appears without any tag, not even a paragraph tag.

Also, according to the documentation of CKEditor, I can pass an ‘attributes’ property to, for instance, specify a class, like so*:
…
styles: [{
name: ‘Title’,
element: ‘h2’,
attributes: {‘class’: ‘section-header’}
}
…
Can I use this attribute property when configuring my rich text editor in Apostrophe?

*Source: http://docs.ckeditor.com/#!/guide/dev_howtos_styles

#3

Hi Jeff, please see:

http://apostrophecms.org/docs/tutorials/howtos/ckeditor.html

Also, how-to questions like this are best posted to Stack Overflow, with the apostrophe-cms tag.

Thanks!

#4

can you answer my first inquiry about preventing the widget from defaulting the widget to a style?

I am using the exact code here: http://apostrophecms.org/docs/tutorials/getting-started/adding-editable-content-to-pages.html#widget-types I am unable to write normal, non-styled text inside of a Singleton Rich Text widget. Why is that happening?

#5

Can I use this attribute property when configuring my rich text editor in Apostrophe, or do i have to add further configuration to the Rich text editor?

#6

this is more of a “is this a bug” than a how-to, which is why its not on stack overflow

#7

Hmm, that example in our docs is deficient. Thanks for pointing it out.

You need to explicitly offer a style for paragraph text if you want it. Here is an example from one of our actual projects; this is what we do. Note that paragraph is the first style.

{
  toolbar: [ 'Styles', 'Bold', 'Italic', 'Link', 'Anchor', 'Unlink', 'BulletedList' ],
  styles: [
    { name: 'Paragraph',                  element: 'p'  },
    { name: 'Quote / Section Descriptor', element: 'h3' },
    { name: 'Attribution / Meta',         element: 'p', attributes: { 'class': 'nd-meta'} },
    { name: 'Header',                     element: 'h5' }
  ]
}
#8

Note that in that project, we also reconfigure what sanitize-html will allow so that the class attribute is allowed, provided it’s one of certain allowed classes.

Here is the lib/modules/apostrophe-rich-text/index.js of that project:

module.exports = {
  sanitizeHtml: {
    allowedClasses: {
      '*': ['nd-meta']
    },
    allowedAttributes: {
      '*': ['style', 'href', 'target']
    },
    allowedTags: [ 'h2', 'h3', 'h4', 'h5', 'h6', 'blockquote', 'p', 'a', 'ul',
    'ol', 'nl', 'li', 'b', 'i', 'strong', 'em', 'strike', 'code', 'hr', 'br',
    'div', 'table', 'thead', 'caption', 'tbody', 'tr', 'th', 'td', 'pre' ],
  }
}

Hope that’s helpful!

#9

Hmmm, thanks for the clarification. That code worked like a charm, and solved my worries about usability.

I am still unclear why my attempt at placing a rich-text widget is causing the App not to save the style. In fact, after about 30 minutes of testing, I have discovered that my widget breaks when my ‘title’ element is h2, but is fine with h3-h6. Here is the code:
{ toolbar: ['Styles', 'Blockquote', 'Bold', 'Italic', 'Link', 'BulletedList'], styles: [{ name: 'Paragraph', element: 'p' }, { name: 'Title', element: 'h2' }] }

When my Title element is set to ‘h2’, the text I set to receive that style is never wrapped in an h2 element. I can make paragraphs, bold text, etc - all those changes save… If I have text “My Header”, and I change the style to Title, and I change the text to read ‘My Awesome Title’, the change to the text is saved, but the text is not wrapped with the specified element.

Does this behavior have anything to do with limiting the design ability of the end user? I have extended the apostophe-rich-text-widget as you showed above.

#10

Update! When I extended the rich text widget with the code you provided, I placed in a folder named ‘apostrophe-rich-text’. The correct folder name is ‘apostrophe-rich-text-widgets’.

I am still understanding all the naming conventions in play, ie. when the folder needs a ‘-widgets’ suffix, and when it doesn’t.

However, I still have some widgets defaulting to a style, and other widgets not defaulting. I find that peculiar, but chances are, I’m doing something weird and invalid, so i’ll keep digging. :slight_smile:

#11

That one is pretty simple: if the module implements a widget type, it must end in -widgets. This allows the widget name to be inferred from the module name by lopping off -widgets (while keeping the module name informative).

#12

i have implemented apostrophe rich text using macro.

Blockquote
{% macro content(context, name) %}
{{ apos.area(context, name, {
widgets: {
‘apostrophe-rich-text’: {
toolbar: [ ‘Styles’, ‘Bold’, ‘Italic’, ‘Link’, ‘Anchor’, ‘Unlink’, ‘BulletedList’ ],
styles: [
{name: ‘Paragraph’, element: ‘p’},
{name: ‘Title’, element: ‘h1’},
{ name: ‘Attribution / Meta’, element: ‘p’, attributes: { ‘class’: ‘f-22’} },
{name: ‘Elements’, element: ‘h2’}
]
},
‘apostrophe-images’: {},
‘apostrophe-files’: {},
‘apostrophe-video’: {}
}
}) }}
{% endmacro %}

but when changing style with Attribution / Meta and page refresh the page set style disappear.

#13

Please post how-to questions to stackoverflow, tagged apostrophe-cms. This forum is for general discussion and announcements. Thanks!