Add bramus_cssextras plugin to TinyMCE Inputfield

2013/12/14 1:40 PM • ProcessWire • Tutorial • Comments (0)

Since a latest updates to TinyMCE inputfield there's an option to add custom plugins from outside the core to TinyMCE on a per field basis. Here's an example how to add the bramus_cssextras plugin.

Ok download the plugin

  1. create a directory in your site folder i.e. "/site/tinymce"
  2. create a plugins folder in it i.e. "/site/tinymce/plugins"
  3. put the folder "bramus_cssextras" in there
  4. put a content.css in the "tinymce" folder (this is where you can define classes or id's, like: p.lead {...}, ul.list {}, h2.red{ ... } ) (see bramus_cssextras homepage for further infos)
  5. now go to the TinyMCE field you want to use it. Under tab "Input" you'll see a "TinyMCE Advanced Configuration Options" collapsed. Open it.
  6. add the buttons to one of the theme_advanced_button fields: "bramus_cssextras_classes, bramus_cssextras_ids" if you don't need id's leave it out
  7. add the content.css to the content_css field setting like: "/site/tinymce/content.css"
  8. add plugin to "Third-party plugin" textarea field like: "bramus_cssextras: /site/tinymce/plugins/bramus_cssextras" as one line.

Done. You should now be able to select the class "lead" when cursor inside a <p> tag. Add as much css classes or id's to the content.css as you wish, bramus_cssextras will autodetect them.

Have fun. 

2013/12/14 1:40 PM | ProcessWire | Tutorial