vuejs3 - Quill và Vue 3 Typescript - quill Không thể nhập themes/snow. Bạn có chắc nó đã được đăng ký không?

Tôi đang cố gắng bắt đầu với trình soạn thảo văn bản phong phú Quill trong dự án Vue 3 Typescript của mình. Tôi đã thêm các dòng sau để đăng ký thành phần 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>

...và tôi đang sử dụng thành phần của mình trong trang của tôi:

<QuillEditor theme="snow" />

Tuy nhiên, khi tôi xem trang, tôi nhận được một lỗi trong bảng điều khiển nói rằng:

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

Trang web không bao giờ hiển thị đúng cách và đó là thông báo lỗi chính mà tôi thấy. Tôi đang làm gì sai ở đây? Tôi đang làm theo hướng dẫn sử dụng mà tôi tìm thấy ở đây. Có suy nghĩ gì không?

Câu trả lời #1

Module @vueup/vue-quill vẫn dường như đang trong giai đoạn phát triển sớm. Tôi cũng không thể làm nó hoạt động theo hướng dẫn của họ. Tuy nhiên, tôi đã thử nghiệm với nhiều phương pháp nhập khẩu khác nhau và tôi đã có thể tạo ra một tình huống hoạt động trong Vue SFC Playground.

Xem ví dụ minh họa hoạt động ở đây.

<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/[email /dist/vue-quill.snow.css";
</style>

Sự khác biệt chính là thay vì nhập CSS trong thẻ script, nó được nhập trong thẻ style. Điều này có thể chỉ là một tác động phụ của SFC Playground và bạn có thể nhập nó chỉ với <style src="@vueup/vue-quill/dist/vue-quill.snow.css"></style> trong tệp thành phần.

Có vẻ như phiên bản mặc định "mới nhất" của @vueup/vue-quill hiện vẫn là 1.0.0-alpha.1, mặc dù một phiên bản beta mới hơn đã có sẵn (hiện là 1.0.0-beta.9), mà tôi đã chọn sử dụng trong ví dụ được liên kết ở trên.

Câu trả lời #2

Tôi gặp phải cùng một vấn đề sau khi cài gói với:

npm install @vueup/vue-quill

Giải pháp là sử dụng:

npm install @vueup/vue-quill@beta --save