diff --git a/app/assets/javascripts/activeadmin/quill_editor_input.js b/app/assets/javascripts/activeadmin/quill_editor_input.js index 0cfae34..7497a37 100644 --- a/app/assets/javascripts/activeadmin/quill_editor_input.js +++ b/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() + }) +})() diff --git a/app/assets/stylesheets/activeadmin/_quill_editor_input.scss b/app/assets/stylesheets/activeadmin/_quill_editor_input.scss index 73701f6..d5e0ca2 100644 --- a/app/assets/stylesheets/activeadmin/_quill_editor_input.scss +++ b/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); diff --git a/lib/formtastic/inputs/quill_editor_input.rb b/lib/formtastic/inputs/quill_editor_input.rb index 3434934..4ae43ca 100644 --- a/lib/formtastic/inputs/quill_editor_input.rb +++ b/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