Awesome
Trestle TinyMCE Integration (trestle-tinymce)
TinyMCE integration plugin for the Trestle admin framework
- Supports TinyMCE 5.x and 6.x (via tinymce-rails)
- Includes custom themes for supported TinyMCE versions
Getting Started
These instructions assume you have a working Trestle application. To integrate trestle-tinymce, first add it to your application's Gemfile:
gem 'trestle-tinymce'
Run bundle install
, and then restart your Rails server.
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/tinymce-6" # or "trestle/tinymce-5" depending on current version of tinymce-rails
c.branding = false
c.elementpath = false
c.menubar = false
c.statusbar = false
c.plugins = [
:lists,
:link,
:image,
:charmap,
:table,
:code
] # also includes [:hr, :paste] on TinyMCE 5
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
Alternate configurations can be defined in a similar fashion:
Trestle.configure do |config|
config.tinymce.alternate.configure do |c|
...
end
end
and then used by passing the data-tinymce-configuration-value
option to the editor:
editor :content, data: { tinymce_configuration_value: "alternate" }
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
For further information, please see tinymce-rails and the TinyMCE documentation.
License
The gem is available as open source under the terms of the LGPLv3 License.