富文本

安装依赖

sql

npm install @vueup/vue-quill quill

在 main.js 全局引入样式

import { createApp } from 'vue'
import App from './App.vue'
import '@vueup/vue-quill/dist/vue-quill.snow.css'

createApp(App).mount('#app')

vue组件

vue

<template>
  <div class="editor-container">
    <!-- 富文本编辑器 -->
    <QuillEditor
      v-model:content="content"
      contentType="html"
      theme="snow"
      :toolbar="toolbarOptions"
      style="height: 300px;"
    />

    <!-- 操作按钮 -->
    <div class="btns">
      <button @click="saveContent">保存</button>
      <button @click="loadContent">加载</button>
    </div>

    <!-- 预览区域 -->
    <div class="preview">
      <h3>预览：</h3>
      <div v-html="savedContent"></div>
    </div>
  </div>
</template>

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

const content = ref("")        // 当前编辑内容
const savedContent = ref("")   // 保存的内容

// 工具栏配置
const toolbarOptions = [
  ["bold", "italic", "underline", "strike"],
  ["blockquote", "code-block"],
  [{ header: 1 }, { header: 2 }],
  [{ list: "ordered" }, { list: "bullet" }],
  [{ script: "sub" }, { script: "super" }],
  [{ indent: "-1" }, { indent: "+1" }],
  [{ size: ["small", false, "large", "huge"] }],
  [{ header: [1, 2, 3, 4, 5, 6, false] }],
  [{ color: [] }, { background: [] }],
  [{ font: [] }],
  [{ align: [] }],
  ["clean"],
  ["link", "image", "video"]
]

// 保存（本地模拟）
const saveContent = () => {
  savedContent.value = content.value
  localStorage.setItem("myRichText", content.value)
  alert("保存成功！")
}

// 加载（本地模拟）
const loadContent = () => {
  content.value = localStorage.getItem("myRichText") || ""
}

onMounted(() => {
  loadContent()
})
</script>

<style scoped>
.editor-container {
  width: 800px;
  margin: auto;
}
.btns {
  margin: 10px 0;
}
.preview {
  margin-top: 20px;
  padding: 10px;
  border: 1px solid #ddd;
}
</style>

注意：在 Vue 3 + TypeScript 项目里，并不是 Quill 本身的问题，而是 TypeScript 报告 JSX 类型不存在。这在安装 @vueup/vue-quill（2.x 版本）时很常见，因为它内部可能用到了 TS 的 JSX 类型。

编译报错

Vue 3 的 .vue 文件在使用 Volar/Vetur 编译时，会生成 .vue.__VLS_script.js、.vue.__VLS_template.jsx 等文件。
TS 编译器默认不认识 JSX，需要手动声明类型。
@vueup/vue-quill 内部可能返回 JSX 元素，导致 TS 报错。

方案：给 TS 声明 JSX 类型

在项目中创建一个 shims-vue.d.ts（或已有文件修改）

// src/shims-vue.d.ts
declare module '*.vue' {
  import type { DefineComponent } from 'vue'
  const component: DefineComponent<{}, {}, any>
  export default component
}

// 支持 JSX/TSX
declare namespace JSX {
  interface IntrinsicElements {
    [elemName: string]: any
  }
}

注意：[elemName: string]: any 是最宽松的做法，TS 不会报 JSX 类型错误。

方案2：Vite + TS 配置调整

在 tsconfig.json 中确保：

json

{
  "compilerOptions": {
    "jsx": "preserve",  // Vue 3 推荐
    "esModuleInterop": true,
    "allowJs": true,    // 如果有 JS 文件
    "checkJs": false
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.d.ts",
    "src/**/*.vue"
  ],
  "exclude": ["node_modules"]
}

确保 @vueup/vue-quill + Quill 版本匹配

@vueup/vue-quill@1.2.0 只支持 Quill 2.x

TS 项目一定要升级 Quill 到 2.x

不要混用 1.x + @vueup/vue-quill

富文本 ​

安装依赖 ​

编译报错 ​

富文本

安装依赖

编译报错