vue3 vue-quill富文中 收到后台返回某个词后富文本内容中这个词变单独变为为红色

可以通过在Vue Quill富文本编辑器中使用自定义格式来实现这个功能。首先，在Vue组件中导入Quill编辑器并定义自定义格式：

<template>
  <div>
    <quill-editor v-model="content" ref="myQuillEditor"></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data() {
    return {
      content: ''
    }
  },
  mounted() {
    // 定义自定义格式
    const ColorClass = Quill.import('attributors/class/color')
    Quill.register(ColorClass, true)

    const ColorStyle = Quill.import('attributors/style/color')
    Quill.register(ColorStyle, true)

    const sizeStyle = Quill.import('attributors/style/size')
    Quill.register(sizeStyle, true)
  }
}
</script>

在mounted钩子函数中，我们使用Quill的register方法来注册自定义格式。我们需要使用Quill的import方法来获取Quill的内置格式类，然后将其传递给register方法。在这个例子中，我们注册了三个自定义格式：ColorClass、ColorStyle和sizeStyle。

接下来，在接收到后台返回的数据后，我们可以使用Quill的setText方法来设置编辑器的内容，并通过Quill的formatText方法来将指定的词汇标记为红色：

methods: {
  onReceiveData(data) {
    // 接收到后台返回的数据
    const word = data.word
    const content = data.content

    // 设置编辑器的内容
    this.$refs.myQuillEditor.quill.setText(content)

    // 将指定的词汇标记为红色
    const index = this.$refs.myQuillEditor.quill.getText().indexOf(word)
    if (index !== -1) {
      this.$refs.myQuillEditor.quill.formatText(index, word.length, {
        color: 'red'
      })
    }
  }
}

在onReceiveData方法中，我们首先使用Quill的setText方法设置编辑器的内容为后台返回的内容。然后，我们使用Quill的getText方法获取编辑器的文本内容，并查找指定的词汇。如果找到了指定的词汇，我们使用Quill的formatText方法将其标记为红色。该方法需要三个参数：开始位置、长度和样式。在这个例子中，我们将开始位置设置为找到的词汇的索引，将长度设置为词汇的长度，将样式设置为包含红色字体颜色的对象。

这样，当我们接收到后台返回的数据后，编辑器中指定的词汇就会被标记为红色。