Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/blocknotes/activeadmin_trumbowyg
Trumbowyg Editor for ActiveAdmin
https://github.com/blocknotes/activeadmin_trumbowyg
activeadmin activeadmin-plugin rails rails5 ruby
Last synced: 17 days ago
JSON representation
Trumbowyg Editor for ActiveAdmin
- Host: GitHub
- URL: https://github.com/blocknotes/activeadmin_trumbowyg
- Owner: blocknotes
- License: mit
- Created: 2017-10-16T20:31:42.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2024-02-18T19:15:29.000Z (12 months ago)
- Last Synced: 2025-01-14T11:21:15.093Z (24 days ago)
- Topics: activeadmin, activeadmin-plugin, rails, rails5, ruby
- Language: JavaScript
- Homepage:
- Size: 534 KB
- Stars: 32
- Watchers: 2
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# Active Admin Trumbowyg
[](https://badge.fury.io/rb/activeadmin_trumbowyg)
[](https://rubygems.org/gems/activeadmin_trumbowyg)
[](https://github.com/blocknotes/activeadmin_trumbowyg/actions/workflows/linters.yml)
[](https://github.com/blocknotes/activeadmin_trumbowyg/actions/workflows/specs_rails61.yml)
[](https://github.com/blocknotes/activeadmin_trumbowyg/actions/workflows/specs_rails70.yml)
An *Active Admin* plugin to use [Trumbowyg](https://alex-d.github.io/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_):
```css
@import 'activeadmin/trumbowyg/trumbowyg';
@import 'activeadmin/trumbowyg_input';
```
- Add at the end of your Active Admin javascripts (_app/assets/javascripts/active_admin.js_):
```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):
```ruby
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](https://alex-d.github.io/Trumbowyg/documentation/).
- 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](https://github.com/blocknotes/activeadmin_trumbowyg/releases/tag/v0.1.8)
## Examples
### Toolbar buttons configuration
```ruby
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](https://alex-d.github.io/Trumbowyg/documentation/plugins/#plugin-upload).
Add to *active_admin.js* (after *trumbowyg* require):
```js
//= require activeadmin/trumbowyg/plugins/upload/trumbowyg.upload
```
Form field config (example model Article):
```ruby
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):
```ruby
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](examples/upload_plugin_using_activestorage/). 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](CHANGELOG.md).
## 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](https://github.com/blocknotes?utf8=✓&tab=repositories&q=activeadmin&type=source).
Or consider offering me a coffee, it's a small thing but it is greatly appreciated: [about me](https://www.blocknot.es/about-me).
## Contributors
- [Mattia Roccoberton](http://blocknot.es): 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](LICENSE.txt).