I have a quill text editor that I want to customize the default setting to be readonly. When a button is clicked, this setting should toggle between true and false. Here is my component code:
<template>
<div ref="editor"></div>
</template>
<script>
import Quill from 'quill';
import 'quill/dist/quill.core.css';
import 'quill/dist/quill.bubble.css';
import 'quill/dist/quill.snow.css';
export default {
props: {
disabled: { type: Boolean, default: false },
value: {
type: String,
default: ''
}
},
data() {
return {
editor: null,
};
},
mounted() {
this.editor = new Quill(this.$refs.editor, {
modules: {
toolbar: [
[{ header: [1, 2, 3, 4, false] }],
['bold', 'italic', 'underline']
]
},
readOnly: this.disabled,
theme: 'snow',
formats: ['bold', 'underline', 'header', 'italic']
});
this.editor.root.innerHTML = this.value;
this.editor.on('text-change', () => this.update());
},
methods: {
update() {
this.$emit('input', this.editor.getText() ? this.editor.root.innerHTML : '');
}
}
}
</script>
I am passing the 'disabled' prop to control the readonly state of the editor when the button is clicked. Toggling between true and false works fine, but using readOnly: this.disabled does not work as expected.
Although I am working in Vue, I have directly created a component based on Quill.js.
For documentation reference, I am following this link: