CpRichText 富文本

替换旧系统的 KindEditor（公告 / 变更日志 / CRM 拜访记录 / 批量报价）。基于 wangEditor v5，对齐旧版关键能力：图片上传、Word 粘贴、只读态，v-model 绑 HTML 字符串（与旧版 editor.html() 取值口径一致）。

基础用法

基础用法

v-model 绑定 HTML；可切换完整 / 精简工具栏与只读态。图片上传走业务侧 upload 契约（demo 读为 base64 模拟上传成功），支持从 Word 直接粘贴。

<template>
  <div class="demo-col">
    <div class="demo-row">
      <el-radio-group v-model="mode" size="small">
        <el-radio-button value="default">完整工具栏</el-radio-button>
        <el-radio-button value="simple">精简工具栏</el-radio-button>
      </el-radio-group>
      <el-checkbox v-model="disabled" size="small">只读</el-checkbox>
      <span class="demo-value">{{
        lastUpload || "图片上传：走业务侧 upload 契约"
      }}</span>
    </div>

    <ClientOnly>
      <!-- mode 是 wangEditor 的初始化配置，运行时切换需重建，故绑 :key -->
      <CpRichText
        :key="mode"
        v-model="html"
        :mode="mode"
        :disabled="disabled"
        :upload="fakeUpload"
        placeholder="请输入公告内容，可粘贴 Word、拖入图片…"
        :height="260"
        @upload-error="onUploadError"
      />
    </ClientOnly>

    <details class="demo-html">
      <summary>查看 v-model 绑定的 HTML</summary>
      <pre>{{ html || "(空)" }}</pre>
    </details>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const html = ref(
  '<p>对齐旧版<strong>公告</strong>录入：支持<span style="color:#e6a23c">富文本</span>、图片、Word 粘贴。</p>',
);
const mode = ref<"default" | "simple">("default");
const disabled = ref(false);
const lastUpload = ref("");

/**
 * 图片上传契约演示：真实项目在此接后端上传接口（带鉴权），返回可访问 URL。
 * demo 无后端，读成 base64 直接回填，效果等同上传成功。
 */
function fakeUpload(file: File): Promise<string> {
  return new Promise((resolve) => {
    const reader = new FileReader();
    reader.onload = () => {
      lastUpload.value = `已上传：${file.name}（${(file.size / 1024).toFixed(0)} KB）`;
      resolve(reader.result as string);
    };
    reader.readAsDataURL(file);
  });
}

function onUploadError(file: File, err: unknown) {
  lastUpload.value = `上传失败：${file.name}（${String(err)}）`;
}
</script>

<style scoped>
.demo-html {
  margin-top: 8px;
  font-size: 12px;
}
.demo-html pre {
  margin: 6px 0 0;
  padding: 8px;
  background: var(--vp-c-bg-soft);
  border-radius: 4px;
  white-space: pre-wrap;
  word-break: break-all;
}
</style>

显示代码 ▼

图片上传契约

组件不绑定后端，图片上传通过 upload 透传给业务侧接入自己的上传接口与鉴权，返回可访问 URL 即可（对齐旧版 uploadJson，但不把接口地址写死进组件）：

async function upload(file: File): Promise<string> {
  const form = new FormData();
  form.append("file", file);
  // 复用你现有的请求封装 / 鉴权
  const { url } = await http.post("/api/upload/image", form);
  return url; // 返回可访问 URL，组件负责插入编辑器
}

• 不传 upload 时图片以 base64 内联（等同旧版无上传接口的降级行为）
• max-image-size（默认 10MB）超限触发 @upload-error，不发起请求

自定义工具栏

toolbar-keys 只保留指定菜单，exclude-keys 从默认工具栏排除菜单；mode="simple" 用精简工具条。菜单 key 见 wangEditor 工具栏配置。

SSR 环境

wangEditor 依赖 window / document，在 VitePress、Nuxt 等 SSR 场景需用 <ClientOnly>（或 <client-only>）包裹 CpRichText。

API

属性 Props

属性	说明	类型	默认值
v-model	—	string	""
height	编辑区高度，数字按 px 处理	number | string	300
placeholder	—	string	—
disabled	—	boolean	—
mode	default 完整工具栏 / simple 精简工具条	"default" | "simple"	"default"
upload	图片上传实现：接后端返回可访问 URL。不传则禁用图片上传菜单 （对齐旧版 allowImageUpload，但把接口留给业务侧）。	Function	—
toolbar-keys	仅保留这些工具栏菜单（与 excludeKeys 二选一）	string[]	—
exclude-keys	从默认工具栏中排除这些菜单	string[]	—
max-image-size	图片体积上限（MB），超限触发 upload-error	number	10

事件 Events

事件	说明	回调参数
@created	编辑器实例创建完成，透出以便父级调用 wangEditor 原生 API	(IDomEditor)
@uploadError	上传失败（体积超限 / upload reject）	(File)

方法 Expose

方法（ref 调用）	说明
getHtml	取 HTML（空内容返回空串）
getText	取纯文本
clear	清空
getEditor	拿原生 editor 实例