Active Admin Medium Editor

An Active Admin plugin to use medium-editor, a compact and clean WYSIWYG editor.

IMPORTANT NOTICE: while I like the Medium Editor idea of having floating buttons, it looks like that they are slow to release new stable versions. Some editor bugs are related to this problem unfortunately.

• After the installation, select some text in the editor
• A pop-up menu is shown with the available buttons
• Click on a button and the effect will be applied to the selected text

• After installing Active Admin, add to your Gemfile: gem 'activeadmin_medium_editor'
• Add also a SASS/SCSS gem to your Gemfile (ex. gem 'sassc')
• Add at the end of your Active Admin styles (app/assets/stylesheets/active_admin.scss):

@import 'activeadmin/medium_editor/medium_editor';
@import 'activeadmin/medium_editor_input';
@import 'activeadmin/medium_editor/themes/default'; // or another theme

• Add at the end of your Active Admin javascripts (app/assets/javascripts/active_admin.js):

//= require activeadmin/medium_editor/medium_editor
//= require activeadmin/medium_editor_input

• Use the input with as: :medium_editor in Active Admin model conf
• data-options: permits to set medium-editor options directly - see options list (examples below)

Why 2 separated scripts/styles? In this way you can include a different version of medium-editor if you like

UPDATE FROM VERSION < 0.2.8: please change your app/assets/stylesheets/active_admin.scss using the new import lines above

# Active Admin post form conf:
  form do |f|
    f.inputs 'Post' do
      f.input :title
      f.input :description, as: :medium_editor, input_html: { data: { options: '{"spellcheck":false,"toolbar":{"buttons":["bold","italic","underline","anchor"]}}' } }
      f.input :published
    end
    f.actions
  end

toolbar = { buttons: %w[bold italic underline strikethrough subscript superscript anchor image quote pre orderedlist unorderedlist indent outdent justifyLeft justifyCenter justifyRight justifyFull h1 h2 h3 h4 h5 h6 removeFormat html] }
f.input :description, as: :medium_editor, input_html: { data: { options: { toolbar: toolbar } } }

For details about the buttons' effect please refer to medium-editor documentation.

The changelog is available here.

If you use this component just star it. A developer is more motivated to improve a project when there is some interest. My other Active Admin components.

Or consider offering me a coffee, it's a small thing but it is greatly appreciated: about me.

• Mattia Roccoberton: author
• The good guys that opened issues and pull requests from time to time

The gem is available as open-source under the terms of the MIT.