diff --git a/public/css/quill.snow.css b/public/css/quill.snow.css index 70fc3ea..1db5f5d 100644 --- a/public/css/quill.snow.css +++ b/public/css/quill.snow.css @@ -943,3 +943,8 @@ .ql-container.ql-snow { border: 1px solid #ccc; } + +.ql-container, .ql-toolbar { + background-color: white!important; + color: black!important; +} diff --git a/public/js/quill-init.js b/public/js/quill-init.js new file mode 100644 index 0000000..ecee86d --- /dev/null +++ b/public/js/quill-init.js @@ -0,0 +1,24 @@ +document.addEventListener('alpine:init', () => { + Alpine.data('quill', () => ({ + textarea: null, + editor: null, + + init() { + this.textarea = this.$root.querySelector('.ql-textarea') + this.editor = this.$root.querySelector('.ql-editor') + + const t = this + + this.$nextTick(function() { + let quill = new Quill(`#${t.editor.id}`, { + theme: 'snow' + }); + + quill.on('text-change', () => { + t.textarea.value = t.editor.innerHTML || ''; + t.textarea.dispatchEvent(new Event('change')); + }); + }) + }, + })) +}) diff --git a/resources/views/fields/quill.blade.php b/resources/views/fields/quill.blade.php index 36612cc..85ac25d 100644 --- a/resources/views/fields/quill.blade.php +++ b/resources/views/fields/quill.blade.php @@ -9,37 +9,3 @@ ])->except('x-bind:id')" >{!! $value ?? '' !!} - - - - diff --git a/src/Fields/Quill.php b/src/Fields/Quill.php index 1518aba..01df5c7 100644 --- a/src/Fields/Quill.php +++ b/src/Fields/Quill.php @@ -13,5 +13,6 @@ final class Quill extends Textarea protected array $assets = [ 'vendor/moonshine-quill/css/quill.snow.css', 'vendor/moonshine-quill/js/quill.js', + 'vendor/moonshine-quill/js/quill-init.js', ]; }