40 lines
1.4 KiB
JavaScript
40 lines
1.4 KiB
JavaScript
import { Controller } from '@hotwired/stimulus'
|
|
import Quill from 'quill'
|
|
// controllers/application_controller.js
|
|
export default class extends Controller {
|
|
static targets = ['hidden']
|
|
|
|
connect() {
|
|
// Map each editor to its toolbar and hidden field
|
|
this.editors = [
|
|
{
|
|
editorSelector: '#editor-description',
|
|
toolbarSelector: '#toolbar-description',
|
|
hiddenTarget: this.hiddenTargets[0],
|
|
},
|
|
{
|
|
editorSelector: '#editor-descriptionSmall',
|
|
toolbarSelector: '#toolbar-descriptionSmall',
|
|
hiddenTarget: this.hiddenTargets[1],
|
|
},
|
|
]
|
|
|
|
this.editors.forEach(({ editorSelector, toolbarSelector, hiddenTarget }) => {
|
|
const quill = new Quill(editorSelector, {
|
|
modules: {
|
|
toolbar: toolbarSelector, // HTML toolbar container
|
|
},
|
|
theme: 'snow', // include quill.snow.css
|
|
placeholder: 'Écrivez votre texte...',
|
|
})
|
|
|
|
// Keep hidden field in sync with editor HTML
|
|
quill.on('text-change', () => {
|
|
hiddenTarget.value = quill.root.innerHTML
|
|
})
|
|
|
|
// Ensure initial value sync in case user submits without changes
|
|
hiddenTarget.value = quill.root.innerHTML
|
|
})
|
|
}
|
|
} |