wysiwyg_custom.php v.3.13

I created a custom wysiwyg file that you can use/modify. It is based on bootstrap 3.3.7

https://www.interactivetools.com/forum/forum-posts.php?postNum=2240125#post2240125

Dave, did you get this figured out?  If not, post back and I'll take a look for you.

Here's what I have determined. Correct me if I am wrong:

In order to use CSS classes, I need to edit the wysiwyg_custom.php file at line 71 in this manner:

  // styleselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#style_formats
    // Note: Selecting a 'style format' from the 'Formats' dropdown adds whatever classes and styles are listed below
    // ... to the selected content and surrounds that content with the tag specified in inline, block, or selector.
    // ... If using classes, make sure they're defined in both lib/wysiwyg.css and your website CSS files.
    style_formats: [
    { title: 'Body Text Green', selector: 'p',  classes: 'bodytext_green' },
 { title: 'Headline Green', selector: 'p',  classes: 'headline_green' },
 { title: 'Headline Green Large', selector: 'p',  classes: 'headline_green_large' },
 { title: 'Body Link Green', selector: 'p',  classes: 'bodylink_green' },

The classes then appear in the Formats dropdowns on the editor page. Do I have that correct?

I can no longer see the CSS styles under a Styles dropdown as in past versions, correct?

Dave

Hi Dave,

That's correct, the only additional change you'd need to make to your wysiwyg_custom.php to get the formats to appear is to add styleselect option to the toolbar, here is some example code for doing that:

    // Define toolbar buttons. See list of toolbar buttons here: https://www.tinymce.com/docs/advanced/editor-control-identifiers/#toolbarcontrols
    toolbar1: "formatselect fontsizeselect | styleselect | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | superscript subscript charmap | removeformat fullscreen",
    toolbar2: "forecolor backcolor | link anchor | blockquote hr image media table | pastetext paste | codesample code",
    toolbar3: '',

Then you can add the style formats that you'd like to appear in the drop-down:


    // styleselect options - reference: https://www.tinymce.com/docs/configure/content-formatting/#style_formats
    // Note: Selecting a 'style format' from the 'Formats' dropdown adds whatever classes and styles are listed below
    // ... to the selected content and surrounds that content with the tag specified in inline, block, or selector.
    // ... If using classes, make sure they're defined in both lib/wysiwyg.css and your website CSS files.
    style_formats: [
      { title: 'Example Class', selector: 'p',  classes: 'exampleClass' },
      { title: 'Red header',    block: 'h1',    styles: {color: '#ff0000'} },
      { title: 'Red text',      inline: 'span', styles: {color: '#ff0000'} },
      { title: 'Bold text',     inline: 'b'},
      { title: 'Example 1',     inline: 'span', classes: 'example1' },
      { title: 'Example 2',     inline: 'span', classes: 'example2' }
    ],

This will cause a new drop-down with the different formatting options to appear in the WYSIWYG menu, these can be mixed with the Text Format options if required.

Note: If you're having issues with the updates to the wysiwyg_custom.php not appearing in the CMS, ensure that you remove any tinymce-temp gz files from the cmsb/data directory of the site.

Let me know if you've got any other questions.

Cheers,

Greg

Note, you can take this a bit further than the examples here. You can add rules that will add "wrapper" elements to your markup, which opens up a whole other world of opportunities. Here is an example...

Add this...

   { title: 'Intro', block: 'div', classes: 'intro', wrapper: true, merge_siblings: false },


Now you can select a group of elements, select "Intro" from the style select dropdown, and your html will go from this...

<h1>Heading</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>


to this...

<div class="intro">
   <h1>Heading</h1>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc condimentum tempor sodales. Phasellus eu metus vel urna pulvinar congue in vel tellus. </p>
</div>

Mind blown! Mine was :)

That’s so cool! I never realised you could do that. It means for instance I could do break out quotes etc. 

any more examples of that kind of thing?

Here are my base style_formats that I use for most projects:

style_formats: [  
   { title: 'Intro', block: 'div', classes: 'intro', wrapper: true, merge_siblings: false },
   { title: 'Divider Line', selector: 'p,h1,h2,h3,h4,h5,h6,div',  classes: 'divider' },
   { title: 'Feature Box', block: 'div', classes: 'feature-box', wrapper: true, merge_siblings: false },
   { title: 'Inset Box', block: 'div', classes: 'inset-box', wrapper: true, merge_siblings: false },
   { title: 'Pullquote', block: 'div', classes: 'pullquote', wrapper: true, merge_siblings: false },
   { title: 'Button', selector: 'a',  classes: 'btn'},
   { title: 'Images', items: [
     { title: 'Float left', block: 'div', classes: 'floatLeft', wrapper: true, merge_siblings: false },
     { title: 'Float right', block: 'div', classes: 'floatRight', wrapper: true, merge_siblings: false }
   ]},
   { title: 'Photo Caption', block: 'div', classes: 'photo-caption', wrapper: true, merge_siblings: false },
   { title: 'Footnote/s', block: 'div', classes: 'footnotes', wrapper: true, merge_siblings: false },
   { title: 'DEV Notes', block: 'div', classes: 'note', wrapper: true, merge_siblings: false }
],


Wow! I hadn't realised the style select option was so powerful. Thanks for the details Zip.