blocknotes / Activeadmin_trumbowyg
Programming Languages
Labels
Projects that are alternatives of or similar to Activeadmin trumbowyg
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.
Install
- 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).
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.