зеркало из
https://github.com/rs-pro/activeadmin-quill_editor.git
synced 2026-09-03 18:25:51 +03:00
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.
Этот коммит содержится в:
1
app/assets/javascripts/activeadmin/quill.imageUploader.min.js
поставляемый
Обычный файл
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();
|
||||
});
|
||||
|
||||
Ссылка в новой задаче
Block a user