Differently styled WYSIWYG blocks in CMSB

2 posts by 2 authors in: Forums > CMS Builder Community
Last Post: January 11, 2019   (RSS)

By zaba - January 11, 2019 - edited: February 20, 2019

If you have multiple WYSIWYG blocks in your cms, but you need to style them differently, i.e. they do not contain the same global formatting.

For example if you want the 'p' or 'h1' 'h2' etc to be different in another WYSIWYG block, you can achieve this by doing the following.

For your globally formatted blocks, leave the WYSIWYG field name as 'content', for ones you want to style differently change the name of the field to 'content_news' or any other name you wish.

Make sure you add the new styles to your wysiwyg_custom.css (/cmsb/lib/wysiwyg_custom.css). You must add a prefix to the style so if the fieldname is 'content_news' you must change it to 'field_content_news' for it to work. For Example:

.field_content_news p { font-size: 13px; font-weight:400; line-height: 110%; margin-bottom: 18px; }

In addition to this you need to edit (save a copy first) tinymce.min.js (/cmsb/3rdParty/TinyMCE4/tinymce.min.js).

Note if you upgrade this file will be overwritten.

in the file tinymce.min.js find and replace the following: (for tinymce.min.js 4.9.0 (2018-11-27))

// 4.9.0 (2018-11-27)


<body id="'+d+'" class="mce-content-body '+m+'" data-id="'+f.id+'">


<body id="'+d+'" class="mce-content-body '+f.id+'" data-id="'+f.id+'">

If you have any questions please post here and I will respond.