Редактор Quill переключается на направление языка RTL, если он украшен свойством «ref»
Я создал text-editor vue component с quill editor и настроил его для отображения данных из базы данных внутри поля ввода. Для этого мне нужно свойство ref = "quill" элемента <quill-editor> вместе с watcher. Проблема в том, что как только я добавляю свойство, редактор переключается на направление языка bi-directional (справа налево).
text-editor.vue:
<template>
<div id = "text-editor" class = "text-editor">
<quill-editor ref = "quill" :modules = "modules" :toolbar = "toolbar" v-model:content = "store.re.body" contentType = "html"/>
</div>
</template>
<script setup>
import BlotFormatter from 'quill-blot-formatter'
import store from "../../../js/store";
import {ref, watch} from "vue";
store.re.body = ''
const modules = {
module: BlotFormatter,
}
const toolbar = [
[{ 'header': [1, 2, 3, 4, 5, 6, false] }],
[{ 'size': ['small', false, 'large', 'huge'] }],
['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'],
[{ 'align': [] }],
[{ 'list': 'ordered'}, { 'list': 'bullet' }],
[{ 'color': [] }, { 'background': [] }],
[{ 'font': [] }],
['link', 'image', 'video'],
['clean']
];
const quill = ref(null)
watch(() => store.re.body, newValue => quill.value.setHTML(newValue))
</script>
Я пытался изменить его с помощью CSS, но это не помогло:
.ql-editor { direction: ltr }
Свойство css применяется к quill, но направление языка остается RTL.
Добавление [{ 'direction': 'ltr' }] к объекту toolbar тоже не помогает. Есть идеи, как это отладить?
Ответы 1
Проблема не вызвана добавлением ref к <quill-editor>.
Это выглядит как vue-quill#52. Автор пытался исправить это в этот патч, но это только сломало обновления редактора через v-model:content. Вы использовали setHTML() для обхода этой проблемы, но ошибка сброса курсора все еще была активна. Затем ввод чего-либо приведет к тому, что текст будет добавлен в начало, и он будет выглядеть только как RTL.
В качестве обходного пути вы можете переместить курсор в конец строки и перефокусироваться:
watch(
() => store.re.body,
newValue => {
quill.value.setHTML(newValue)
// Workaround https://github.com/vueup/vue-quill/issues/52
// move cursor to end
nextTick(() => {
let q = quill.value.getQuill()
q.setSelection(newValue.length, 0, 'api')
q.focus()
})
}
)
Однако это обнаруживает новую проблему, заключающуюся в том, что удаление текста из середины редактора приводит к тому, что курсор перемещается в конец. Нам нужен способ обновления store.re.body и перемещения курсора Только при обновлении из v-model. В противном случае внешнее обновление (из выборки другого компонента) должно нет перемещать курсор.
Вы можете реализовать это поведение следующим образом:
Замените
<quill-editor>v-model:contentна новыйcontentref.Смотрите ссылку
content, обновляяstore.re.bodyновым значением. Также отслеживайте это новое значение какnewContent.В часах
store.re.bodyигнорируйте новое значение, если оно равноnewContent.
<template> 1️⃣
<quill-editor v-model:content = "content" ⋯/>
</template>
<script setup>
1️⃣
const content = ref('')
2️⃣
let newContent = ''
watch(content, newValue => {
newContent = newValue
store.re.body = newValue
})
watch(
() => store.re.body,
newValue => {
3️⃣
if (newContent === newValue) return
⋮ /* setHTML() and move cursor to end */
}
})
</script>
Не уверен, что понижение поможет. Единственный способ узнать это попробовать! :) Я бы сделал git bisect, чтобы исправить ошибку.
Спасибо за все это понимание. Сможет ли переход на более раннюю версию quill сделать
v-modelреактивно пригодным для использования?