typescript - Quill 和 Vue 3 Typescript - quill 无法导入主题/雪。你确定它被注册了吗？

Question

我正在尝试开始使用 Quill rich text editor在我的 Vue 3 Typescript 项目中。我添加了以下行来注册 QuillEditor 组件:

import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css";

<snip>
export default defineComponent({
  name: "dev-ask",
  components: {
    QuillEditor,
  },
<snip>

...我正在我的页面中使用我的组件:

<QuillEditor theme="snow" />

但是，当我查看页面时，我在控制台中收到一条错误消息:

quill Cannot import themes/snow. Are you sure it was registered?

该页面从未正确呈现，这是我看到的主要错误消息。我在这里做错了什么？我按照找到的使用说明进行操作 here .想法？

Answer 1

模块@vueup/vue-quill似乎仍处于早期开发阶段。我也无法通过他们的指南使其正常工作。但是，我尝试了各种导入方法，并且能够在 Vue SFC Playground 中获得一个工作场景。

参见 working example here .

<script setup>
import { ref } from 'vue'
import { QuillEditor } from "@vueup/vue-quill"

const msg = ref('Hello World!!!!')
</script>

<template>
  <quill-editor v-model:content="msg" content-type="html" theme="snow"></quill-editor>
  <p>Result: <code>{{ msg }}</code></p>
</template>

<style>
@import "https://unpkg.com/@vueup/vue-quill@1.0.0-beta.9/dist/vue-quill.snow.css";
</style>

主要区别在于，CSS 不是在脚本标签中导入，而是在样式标签中导入。这可能只是 SFC Playground 的副作用，您可以使用 <style src="@vueup/vue-quill/dist/vue-quill.snow.css"></style> 导入它。在组件文件中。

@vueup/vue-quill 的默认“最新”版本似乎也是如此目前还是1.0.0-alpha.1 ，即使有更新的测试版可用(当前为 1.0.0-beta.9 )，我已选择在上面的链接示例中使用它。