How to use Amazon S3 with trestle-tinymce and trestle-active_storage?
What is Trestle?
This is a modern, responsive admin framework for Ruby on Rails. It’s help we built admin dashboard very fast. It’s so cool and beautiful. This is homepage: trestle.io.
Trestle have some plugins such as: trestle-auth, trestle-search, trestle-tinymce, trestle-sidekiq, trestle-active_storage,..
How to use Amazon S3 with trestle-tinymce and trestle-active_storage?
From Rails 5.2, we have Active Storage, it facilitates uploading files to a cloud storage service like Amazon S3, Google Cloud Storage, or Microsoft Azure Storage and attaching those files to Active Record objects.
trestle-active_storage is integration plugin for the Trestle admin framework.
It’s easy to install and setup with some steps:
Add
gem 'trestle-active_storage' to your Gemfile.
Define the active storage fields in your Trestle resource and use the
active_storage_field
field type:
Trestle.resource(:users) do
active_storage_fields do
[:avatar, :profile_picture]
end
form do |user|
text_field :first_name
text_field :last_name
active_storage_field :avatar
active_storage_field :profile_picture
end
end
trestle-tinymce is TinyMCE integration plugin for the Trestle admin framework.
Add to your Gemfile:
gem 'trestle-tinymce'
To add a TinyMCE editor to your form, use the editor
(or tinymce
) field type:
Trestle.resource(:articles) do
form do |article|
editor :content
end
end
The default TinyMCE configuration can be edited by defining options within config/initializers/trestle.rb
. The default configuration is shown below:
Trestle.configure do |config|
config.tinymce.default.configure do |c|
c.skin = "trestle"
c.selector = "textarea.tinymce"
c.branding = false
c.elementpath = false
c.menubar = false
c.statusbar = false
c.plugins = [
:lists,
:link,
:image,
:charmap,
:table,
:code,
:hr,
:paste
]
c.toolbar = [
"styleselect | bold italic underline strikethrough | subscript superscript hr | alignleft aligncenter alignright alignjustify",
"bullist numlist | indent outdent | undo redo | link unlink | image charmap table | code"
]
c.link_context_toolbar = true
c.convert_urls = false
end
end
Custom callbacks can be passed as strings and they will be automatically converted to JavaScript functions. The following example allows images to be uploaded and embedded as blob URLs.
Trestle.configure do |config|
config.tinymce.default.configure do |c|
c.file_picker_types = "image"
c.file_picker_callback = "function (cb, value, meta) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', 'image/*');
input.onchange = function () {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function () {
var id = 'blobid' + (new Date()).getTime();
var blobCache = tinymce.activeEditor.editorUpload.blobCache;
var base64 = reader.result.split(',')[1];
var blobInfo = blobCache.create(id, file, base64);
blobCache.add(blobInfo);
cb(blobInfo.blobUri(), { title: file.name });
};
reader.readAsDataURL(file);
};
input.click();
}"
end
end
Now, you can uploading your attachments to S3 via TinyMCE editor.
Next post, I will help you how to avoid Broken image in editor after uploading from front-end.