%div#toolbar.toolbar-wrap
  %a{ data: { 'wysihtml5-command' => 'bold' } }
    %span.glyphicon.glyphicon-bold
  %a{ data: { 'wysihtml5-command' => 'italic' } }
    %span.glyphicon.glyphicon-italic
  %a{ data: { 'wysihtml5-command' => 'alignLeftStyle' } }
    %span.glyphicon.glyphicon-align-left
  %a{ data: { 'wysihtml5-command' => 'alignCenterStyle' } }
    %span.glyphicon.glyphicon-align-center
  %a{ data: { 'wysihtml5-command' => 'alignRightStyle' } }
    %span.glyphicon.glyphicon-align-right
  %a{ data: { 'wysihtml5-command' => 'insertBlockQuote' } }
    %span.glyphicon.glyphicon-indent-left

  %a{ data: { 'wysihtml5-command' => 'formatBlock', 'wysihtml5-command-value' => 'h1'  } } H1
  %a{ data: { 'wysihtml5-command' => 'formatBlock', 'wysihtml5-command-value' => 'h2'  } } H2
  %a{ data: { 'wysihtml5-command' => 'formatBlock', 'wysihtml5-command-value' => 'h3'  } } H3
  %a{ data: { 'wysihtml5-command' => 'formatBlock', 'wysihtml5-command-value' => 'h4'  } } H4
  %a{ data: { 'wysihtml5-command' => 'formatBlock', 'wysihtml5-command-value' => 'p'  } }  P

  %a{ href: 'javascript:;', data: { 'wysihtml5-command' => 'createLink'}, class: ''} Link
  %a{ href: 'javascript:;', data: { 'wysihtml5-command' => 'insertImage'}, class: ''} Image


  %div{ data: { 'wysihtml5-dialog' => 'createLink' }, style: 'display: none' }
    %hr
    %label Link
    = select_tag '#', options_for_select(PagesCms::Page.all.collect {|p| [p.title, slugged_path(p.slug)] }), 'data-wysihtml5-dialog-field' => 'href', include_blank: true, id: 'select', class: 'form-control inline-form select2'
    %input.form-control.inline-form{ data: {'wysihtml5-dialog-field' => 'text'}, 'value' => 'link name'}
    %a{ data: { 'wysihtml5-dialog-action' => 'save' } } OK
    %a{ data: { 'wysihtml5-dialog-action' => 'cancel' } } Cancel

  %div{ data: { 'wysihtml5-dialog' => 'insertImage' }, style: 'display: none' }
    %hr
    %label Image
    = select_tag '#', options_from_collection_for_select(PagesCms::Image.all, :file, :name), 'data-wysihtml5-dialog-field' => 'src', include_blank: true, id: 'select_img', class: 'form-control inline-form select2'
    %select{ data: {'wysihtml5-dialog-field' => 'className'}, class: 'form-control inline-form' }
      %option{ value: '' } Default
      %option{ value: 'float-left'} Left
      %option{ value: 'float-left'} Right
    %a{ data: { 'wysihtml5-dialog-action' => 'save' } } OK
    %a{ data: { 'wysihtml5-dialog-action' => 'cancel' } } Cancel

= f.text_area :content, 'data-placeholder' => 'content', class: 'form-control', rows: 20, id: 'editor'

:javascript
  var random = Math.floor((Math.random() * 10000) + 1);
  document.getElementById('editor').id = 'editor' + random
  document.getElementById('toolbar').id = 'toolbar' + random

  var editor = new wysihtml5.Editor('editor' + random, {
      toolbar: 'toolbar' + random,
      parserRules:  wysihtml5ParserRules
  });
  $('.select2').select2({
    tags: true,
    createTag: function (params) {
      return {
        id: params.term,
        text: params.term,
        newOption: true
      }
    }
  });