Editor default options refactoring + include imageUploader plugin

In order to use imageUploader plugin:
- js/css files must included in the app;
- an upload method must be provided in Active Admin entity;
- the image_uploader server_url field option needs to be set.
Этот коммит содержится в:
Mattia Roccoberton
2020-09-04 10:48:17 +02:00
родитель 707f4a5cc7
Коммит 4ec6e80760
3 изменённых файлов: 91 добавлений и 15 удалений

1
app/assets/javascripts/activeadmin/quill.imageUploader.min.js поставляемый Обычный файл

Различия файлов скрыты, потому что одна или несколько строк слишком длинны

Просмотреть файл

@@ -1,25 +1,40 @@
// --- functions ---------------------------------------------------------------
function initQuillEditors() {
var default_theme = 'snow';
var default_toolbar = [
['bold', 'italic', 'underline'],
['link', 'blockquote', 'code-block'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image'],
['clean'],
];
var editors = document.querySelectorAll('.quill-editor');
var default_options = {
modules: {
toolbar: [
['bold', 'italic', 'underline'],
['link', 'blockquote', 'code-block'],
[{ 'script': 'sub'}, { 'script': 'super' }],
[{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['clean'],
]
},
placeholder: '',
theme: 'snow'
};
var registered_plugins = {};
for(var i = 0; i < editors.length; i++) {
var content = editors[i].querySelector('.quill-editor-content');
var isActive = editors[i].classList.contains('quill-editor--active');
if(content && !isActive) {
var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : default_options;
// Setup editor options
var options = editors[i].getAttribute('data-options') ? JSON.parse(editors[i].getAttribute('data-options')) : {};
if(!options.theme) options.theme = default_theme;
if(!options.modules) options.modules = {};
if(!options.modules.toolbar) options.modules.toolbar = default_toolbar;
// Setup plugin options
var plugin_options = editors[i].getAttribute('data-plugins') ? JSON.parse(editors[i].getAttribute('data-plugins')) : {};
if(plugin_options.image_uploader && plugin_options.image_uploader.server_url) {
if(!registered_plugins.image_uploader) {
Quill.register('modules/imageUploader', ImageUploader);
registered_plugins.image_uploader = true;
}
var opts = plugin_options.image_uploader;
options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name);
}
// Init editor
editors[i]['_quill-editor'] = new Quill(content, options);
editors[i].classList += ' quill-editor--active';
}
@@ -40,6 +55,33 @@ function initQuillEditors() {
}
}
function setupImageUploader(server_url, field_name) {
return {
upload: file => {
return new Promise((resolve, reject) => {
const formData = new FormData();
formData.append(field_name || 'file_upload', file);
fetch(server_url, {
body: formData,
headers: {
'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
},
method: 'POST'
}).then(response => response.json())
.then(result => {
resolve(result.url);
})
.catch(error => {
reject('Upload failed');
console.error('Error: ', error);
});
});
}
}
}
// --- events ------------------------------------------------------------------
$(document).ready( function() {
initQuillEditors();
});