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

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 }
],


Nice. Thanks!

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