Workaround: vue-quill-editor issue with cleared out editors

The caret position would be lost and the data corrupted. Fixed by always setting the content to the basic template Quill expects (<p><br><p>).
parent 3a14051c
......@@ -22,13 +22,13 @@ export default {
content: {
type: String,
required: false,
default: ''
default: '<p><br></p>'
}
},
data () {
return {
editorContent: this.content || '',
editorContent: this.content || '<p><br></p>',
editorOption: {
placeholder: 'What’s on your mind?',
theme: 'snow',
......@@ -48,10 +48,13 @@ export default {
methods: {
clear () {
this.editorContent = ''
this.editorContent = '<p><br></p>'
},
editorChange ( { quill, html, text } ) {
this.$emit('composerChange', quill, html, text)
// The HTML should never be an empty string (which can happen if you select all the text in the editor and delete it or if you press the “Clear” button). Quill doesn’t handle this well (the caret gets put above and to the left of the editor and the generated HTML is corrupted). To avoid this, we’re setting it to the basic template Quill expects for an empty editor.
if (html == '') { this.editorContent = '<p><br></p>'}
},
post () {
this.$emit('post', this.editorContent)
......
......@@ -77,11 +77,11 @@ export default {
posts: [
{
id: 1,
content: "<h2>Earliest post</h2><p>So is this.</p>"
content: "<h2>Later post</h2><p>So is this!</p>"
},
{
id: 0,
content: "<h2>Later post</h2><p>This is a great post.</p>"
content: "<h2>Earliest post</h2><p>This is a great post.</p>"
}
]
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment