Active Admin Trumbowyg

An Active Admin plugin to use Trumbowyg as WYSIWYG editor in form inputs.

Features: - automatically includes a fast & lightweight rich editor in Active Admin; - customizable options via data attributes in the form input; - plugins included, like images upload.

Please :star: if you like it.

Install

NOTE: if you are using Ruby < 3.0, please use Activeadmin Trumbowyg 1.0.0

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

@import 'activeadmin/trumbowyg/trumbowyg';
@import 'activeadmin/trumbowyg_input';

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

//= require activeadmin/trumbowyg/trumbowyg
//= require activeadmin/trumbowyg_input

• Use the input with as: :trumbowyg in Active Admin model conf
• To fix icons in production environment execute the task: rails trumbowyg:nondigest

UPDATE FROM VERSION < 2.0: please change the Trumbowyg line in your app/assets/stylesheets/active_admin.scss to: @import 'activeadmin/trumbowyg/trumbowyg';

Usage

Form config (example model Article):

form do |f|
  f.inputs 'Article' do
    f.input :title
    f.input :description, as: :trumbowyg
    f.input :published
  end
  f.actions
end

Notes

• data-options permits to set Trumbowyg editor options directly; some examples below. For reference see options list.
• Why 2 separated scripts/style files? To allow to include different versions of Trumbowyg editor if needed.
• To use this plugins with Active Admin 1.x please use the version 0.1.8

Examples

Toolbar buttons configuration

f.input :description, as: :trumbowyg, input_html: { data: { options: { btns: [['bold', 'italic'], ['superscript', 'subscript'], ['link'], ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'], ['unorderedList', 'orderedList'], ['horizontalRule'], ['removeformat']] } } }

Trumbowyg upload plugin

Plugin reference here.

Add to active_admin.js (after trumbowyg require):

//= require activeadmin/trumbowyg/plugins/upload/trumbowyg.upload

Form field config (example model Article):

unless resource.new_record?
  f.input :description, as: :trumbowyg, input_html: { data: { options: { btns: [['bold', 'italic'], ['link'], ['upload']], plugins: { upload: { serverPath: upload_admin_post_path(resource.id), fileFieldName: 'file_upload' } } } } }
end

Upload method (using ActiveStorage):

member_action :upload, method: [:post] do
  result = { success: resource.images.attach(params[:file_upload]) }
  result[:file] = url_for(resource.images.last) if result[:success]
  render json: result
end

For the relevant files of this upload example see here. Consider that this is just a basic example: images are uploaded as soon as they are attached to the editor (regardless of the form submit), it shows the editor only for an existing record (because of the upload_admin_post_path) and it doesn't provide a way to remove images (just deleting them from the editor will not destroy them, you'll need to implement a purge logic for that).

Changelog

The changelog is available here.

Development

Project created by Mattia Roccoberton, thanks also to the good guys that opened issues and pull requests from time to time.

For development information please check this document.

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.

License

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