mirrors/activeadmin-quill_editor
1
0
Форкнуть 0
зеркало из https://github.com/rs-pro/activeadmin-quill_editor.git synced 2026-08-28 15:36:17 +03:00
Код Задачи Пакеты Проекты Релизы Вики Активность

JS refactoring

Просмотр исходного кода
Этот коммит содержится в:
Mattia Roccoberton
2020-09-08 18:14:14 +02:00
родитель c0d37ad94e
Коммит e5db64af96
3 изменённых файлов: 83 добавлений и 81 удалений
Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

158
app/assets/javascripts/activeadmin/quill_editor_input.js
Просмотреть файл

@@ -1,91 +1,93 @@
// --- 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 registered_plugins = {};
(function () {
// --- functions ---------------------------------------------------------------
function initQuillEditors() {
let default_theme = 'snow'
let default_toolbar = [
['bold', 'italic', 'underline'],
['link', 'blockquote', 'code-block'],
[{ 'script': 'sub' }, { 'script': 'super' }],
[{ 'align': [] }, { list: 'ordered' }, { list: 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
['image'],
['clean'],
]
let editors = document.querySelectorAll('[data-aa-quill-editor]')
let 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) {
// 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;
for (let i = 0; i < editors.length; i++) {
let content = editors[i].querySelector('[data-aa-quill-content]')
let isActive = editors[i].classList.contains('quill-editor--active')
if (content && !isActive) {
// Setup editor options
let 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;
// Setup plugin options
let 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
}
let opts = plugin_options.image_uploader
options.modules.imageUploader = setupImageUploader(opts.server_url, opts.field_name)
}
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';
// Init editor
editors[i]['_quill-editor'] = new Quill(content, options)
editors[i].classList += ' quill-editor--active'
}
}
let formtastic = document.querySelector('form.formtastic')
if (formtastic) {
formtastic.onsubmit = () => {
for (let i = 0; i < editors.length; i++) {
let input = editors[i].querySelector('input[type="hidden"]')
if (editors[i]['_quill-editor'].editor.isBlank()) {
input.value = ''
} else {
input.value = editors[i]['_quill-editor'].root.innerHTML
}
}
};
}
}
var formtastic = document.querySelector('form.formtastic');
if(formtastic) {
formtastic.onsubmit = function() {
for(var i = 0; i < editors.length; i++) {
var input = editors[i].querySelector('input[type="hidden"]');
if (editors[i]['_quill-editor'].editor.isBlank()) {
input.value = '';
} else {
input.value = editors[i]['_quill-editor'].root.innerHTML;
}
}
};
}
}
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)
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);
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)
})
})
.catch(error => {
reject('Upload failed');
console.error('Error: ', error);
});
});
}
}
}
}
// --- events ------------------------------------------------------------------
$(document).ready( function() {
initQuillEditors();
});
// --- events ------------------------------------------------------------------
$(document).ready(() => {
initQuillEditors()
})
$(document).on('has_many_add:after', function() {
initQuillEditors();
});
$(document).on('has_many_add:after', '.has_many_container', () => {
initQuillEditors()
})
})()

2
app/assets/stylesheets/activeadmin/_quill_editor_input.scss
Просмотреть файл

@@ -5,7 +5,7 @@
text-align: initial;
}
body.active_admin .quill-editor {
body.active_admin [data-aa-quill-editor] {
display: inline-block;
width: calc(80% - 2px);

4
lib/formtastic/inputs/quill_editor_input.rb
Просмотреть файл

@@ -6,9 +6,9 @@ module Formtastic
def to_html
input_wrapping do
label_html <<
template.content_tag(:div, input_html_options.merge(class: 'quill-editor')) do
template.content_tag(:div, input_html_options.merge('data-aa-quill-editor': '1')) do
builder.hidden_field(input_name) <<
template.content_tag(:div, class: 'quill-editor-content') do
template.content_tag(:div, 'data-aa-quill-content': '1') do
object.send(method).try :html_safe
end
end