From b251a28b1351bd6d4164f7c7a2e81abd79896af0 Mon Sep 17 00:00:00 2001 From: Myles Cowper-Coles Date: Tue, 25 Sep 2018 13:38:13 +0100 Subject: [PATCH] Making sure quill editor updates with has_many What: * adding an event listerner so when people add a 'has_many' relationship the quill editor is initialized correctly on any fields; Why: * If you have a nested has_many attributes in active admin, the form is not created until you click the 'Add New ObjectName' button. This triggers a jQuery event called 'has_many_add:after' which you can use to trigger the re init of the quill editor. * https://github.com/activeadmin/activeadmin/blob/9a33a081c99d9aa19045d46155ffe5f51ea76710/app/assets/javascripts/active_admin/lib/has_many.es6#L52 --- .../javascripts/activeadmin/quill_editor_input.js | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/app/assets/javascripts/activeadmin/quill_editor_input.js b/app/assets/javascripts/activeadmin/quill_editor_input.js index ad6af7c..9aaed36 100644 --- a/app/assets/javascripts/activeadmin/quill_editor_input.js +++ b/app/assets/javascripts/activeadmin/quill_editor_input.js @@ -1,4 +1,12 @@ -window.onload = function() { +window.onload = function () { + initQuillEditors(); +} + +$(document).on('has_many_add:after', function() { + initQuillEditors(); +}); + +var initQuillEditors = function() { var editors = document.querySelectorAll( '.quill-editor' ); var default_options = { modules: { @@ -19,9 +27,11 @@ window.onload = function() { for( var i = 0; i < editors.length; i++ ) { var content = editors[i].querySelector( '.quill-editor-content' ); - if( 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; editors[i]['_quill-editor'] = new Quill( content, options ); + editors[i].classList += ' quill-editor--active'; } }