The person who edits pages using CouchCMS is very scared of directly editing HTML but wants a way to easily add lists to the content of a richtext element which have list style type:

list-style-type: upper-roman;
list-style-type: lower-roman;
list-style-type: upper-alpha;
list-style-type: lower-alpha;

I can't see a way to add these list types to the rich text menu - even if I use the custom option.

And I can't find any other way to implement this without having to resort to advising my client to view source and enter some HTML for the style.

I could do a shortcode but the list then would appear incorrectly in the WYSIWYG editor.

Is there a way around this?

[trendoman]

Hi, I solved this puzzle successfully with a custom style as in http://docs.couchcms.com/tags-reference ... tom_styles

Editable's definition:

Code: Select all

        
<cms:editable
        name='richtext'
        label='Text'
        desc=''
        toolbar='full'
        custom_styles="my_styles=custom_styles.js"              
        type='richtext' />

Content of custom_styles.js file placed in root of the website:

Code: Select all

CKEDITOR.stylesSet.add( 'my_styles',
[

   { name: 'Italic Title',      element: 'h2', styles: { 'font-style': 'italic' } },
   { name: 'Subtitle',         element: 'h3', styles: { 'color': '#aaa', 'font-style': 'italic' } },
   {
      name: 'Special Container',
      element: 'div',
      styles: {
         padding: '5px 10px',
         background: '#eee',
         border: '1px solid #ccc'
      }
   },
   { name: 'Upper Roman', element: 'ul', styles: { 'list-style-type': 'upper-roman' } },
   { name: 'Lower Roman', element: 'ul', styles: { 'list-style-type': 'lower-roman' } },
   { name: 'Upper Alpha', element: 'ul', styles: { 'list-style-type': 'upper-alpha' } },
   { name: 'Lower Alpha', element: 'ul', styles: { 'list-style-type': 'lower-alpha' } },
    
   { name: 'Marker',         element: 'span', attributes: { 'class': 'marker' } },

   { name: 'Big',            element: 'big' },
   { name: 'Small',         element: 'small' },
   { name: 'Typewriter',      element: 'tt' },

   { name: 'Computer Code',   element: 'code' },
   { name: 'Keyboard Phrase',   element: 'kbd' },
   { name: 'Sample Text',      element: 'samp' },
   { name: 'Variable',         element: 'var' },

   { name: 'Deleted Text',      element: 'del' },
   { name: 'Inserted Text',   element: 'ins' },

   { name: 'Cited Work',      element: 'cite' },
   { name: 'Inline Quotation',   element: 'q' },

   { name: 'Language: RTL',   element: 'span', attributes: { 'dir': 'rtl' } },
   { name: 'Language: LTR',   element: 'span', attributes: { 'dir': 'ltr' } }
    
]);

Register changes by visiting page as superadmin, reload and voila. It seems that styles are available for selection after user created a regular list first, then wishes to apply a custom format for the list.

2018-04-23-001.png (37.78 KiB) Viewed 1359 times

Absolutely perfect, thank you!!