@qynpm/rich-text

起印富文本包，提供 Vue 3 + Quill 编辑器和不创建 Quill 实例的安全查看器。Quill 与 DOMPurify 只在包内部使用，业务侧只依赖 Qy HTML 协议和 Qy 类型。

使用

<script setup lang="ts">
import { ref } from 'vue'
import { QyRichTextEditor } from '@qynpm/rich-text'

const html = ref('<p>欢迎使用。</p>')

const uploadImage = async (file: File) => {
  // 由宿主上传并返回最终 URL；组件不持有接口、token 或 store。
  return await uploadToYourService(file)
}
</script>

<template>
  <QyRichTextEditor
    v-model="html"
    :upload-image="uploadImage"
    placeholder="输入内容"
    :height="320"
  />
</template>

安全查看器：

<script setup lang="ts">
import { QyRichTextViewer } from '@qynpm/rich-text'
import { openQyImagePreview } from '@qynpm/ui'

const html = '<h2>只读标题</h2><p>正文和列表会保留，危险标签会被移除。</p>'
</script>

<template>
  <QyRichTextViewer
    :content="html"
    empty-text="暂无内容"
    :max-height="360"
    :image-preview="(url) => openQyImagePreview({ url })"
  />
</template>

QyRichTextViewer 的 content 始终经过内置 DOMPurify adapter 清理；脚本、事件属性、危险协议、iframe、object、embed、style 和 SVG 会被拒绝。allowedTags 与 allowedAttributes 只能追加受限的 Qy 标记/属性，不能关闭清理或传入 DOMPurify hook。imagePreview 是可选的 (url: string) => void 回调，宿主可在其中调用 openQyImagePreview。

单组件查看器入口：

import QyRichTextViewer from '@qynpm/rich-text/qy-rich-text-viewer'

查看器公开 props：content?: string、emptyText?: string、minHeight?: number | string、maxHeight?: number | string、linkTarget?: '_self' | '_blank' | '_parent' | '_top'、imagePreview?: (url: string) => void、allowedTags? 和 allowedAttributes?。

单组件入口：

import QyRichTextEditor from '@qynpm/rich-text/qy-rich-text-editor'

公共协议

• props：modelValue?: string、uploadImage?: (file: File) => string | Promise<string>、readOnly?、disabled?、placeholder?、height?: number | string
• emits：update:modelValue(html)、change(html)、focus、blur、upload-error(error)
• uploadImage 只接受 PNG/JPEG/GIF/WebP，单文件上限 5MB；粘贴批次和连续粘贴按顺序串行上传，单个失败不会阻断后续文件。
• 图片尺寸工具栏提供 10%、30%、50%、70%、100% 和 复原。
• expose：getHTML()、setHTML(html)、focus()、blur()、insertImage(url)。不暴露 Quill 实例、Delta、Range 或厂商事件对象。

上传失败通过 upload-error 事件和 upload-error slot 反馈；组件不会调用 Element Plus 消息或 window.alert。