How to add h4 tag to refinerycms editor?

Question

I'm trying to add an h4 tag to the refinerycms wysiwyg editor. How do i do this? Not finding any documentation on this.

I'm assuming i have to do something with this config var:

config.wymeditor_whitelist_tags = {}

Answer 1

The following instructions apply to versions 2.x.x and 3.x.x of Refinery CMS.

However, in version 3.x.x you will need to use custom_visual_editor_boot_options instead of custom_wymeditor_boot_options.

Using this file: https://github.com/refinery/refinerycms/blob/master/core/app/assets/javascripts/admin.js you can specify custom options for WYMeditor in Refinery.

First, you need to override the file:

bundle exec rake refinery:override javascript=admin

Now, open app/assets/javascripts/admin.js and edit it to be like the following:

// Use this to customize the wymeditor boot process
// Just mirror the options specified in boot_wym.js with the new options here.
// This will completely override anything specified in boot_wym.js for that key.
// e.g. skin: 'something_else'
if (typeof(custom_wymeditor_boot_options) == "undefined") { 
  custom_wymeditor_boot_options = {
    containersItems: [
      {'name': 'h1', 'title':'Heading_1', 'css':'wym_containers_h1'}
      , {'name': 'h2', 'title':'Heading_2', 'css':'wym_containers_h2'}
      , {'name': 'h3', 'title':'Heading_3', 'css':'wym_containers_h3'}
      , {'name': 'h4', 'title':'Heading_4', 'css':'wym_containers_h4'}
      , {'name': 'p', 'title':'Paragraph', 'css':'wym_containers_p'}
    ]
  }; 
}

Note that what you are doing is overriding boot_wym.js.erb which only specifies h1, h2, h3 and p as container tags. See: https://github.com/refinery/refinerycms/blob/2-0-stable/core/app/assets/javascripts/refinery/boot_wym.js.erb#L49-L54

Any options that you specify inside custom_wymeditor_boot_options override anything inside wymeditor_boot_options in boot_wym.js.erb so make sure that it's valid Javascript or else the editors won't load at all.

Hope that helps; let me know if you need anything clarified.

Phil