用 "ref" 属性修饰时，Quill Editor 切换到 RTL 语言方向

Question

我用 quill editor 创建了一个 text-editor vue component 并将其配置为在其输入字段中显示来自数据库的数据。为此，我需要 <quill-editor> 元素上的 ref="quill" 属性和 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 对象也无济于事。知道如何调试吗？

Answer 1

此问题不是由向 <quill-editor> 添加 ref 引起的。

这看起来像 vue-quill#52. The author tried to fix it in this patch，但这只会破坏通过 v-model:content 进行的编辑器更新。您使用 setHTML() 解决了该问题，但 cursor-reset 错误仍然存在。然后，键入任何内容都会导致文本被添加到前面，使其看起来只是 RTL。

作为解决方法，您可以将光标移动到行尾，然后 re-focus:

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()
    })
  }
)

demo 1

但是，这揭示了一个新问题，即从编辑器中间删除文本会导致光标跳到末尾。我们需要一种方法来更新 store.re.body 并在更新来自 v-model 时仅 移动光标 。否则，外部更新（来自其他组件的提取）应该不移动光标。

您可以按如下方式实现该行为：

用新的 content 参考替换 <quill-editor> 的 v-model:content。
观看 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>

demo 2

用 "ref" 属性修饰时，Quill Editor 切换到 RTL 语言方向

Quill Editor switches to RTL language direction when decorated with "ref" property

wysiwyg

quill

vue.js

vuejs3

vue-quill-editor

用 "ref" 属性 修饰时，Quill Editor 切换到 RTL 语言方向

Quill Editor switches to RTL language direction when decorated with "ref" property

wysiwyg

quill

vue.js

vuejs3

vue-quill-editor

用 "ref" 属性修饰时，Quill Editor 切换到 RTL 语言方向