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.
Usage
- 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
Install
- 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):
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):
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
Examples
Basic usage
# 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
Buttons configuration
= { 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: } } }
For details about the buttons' effect please refer to medium-editor documentation.
Changelog
The changelog is available here.
Do you like it? Star it!
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.
Contributors
- Mattia Roccoberton: author
- The good guys that opened issues and pull requests from time to time
License
The gem is available as open-source under the terms of the MIT.