@vup/richeditor 富文本编辑器

基于 WangEditor 的 Vue 3 富文本编辑器封装，提供开箱即用的富文本编辑功能。

技术栈

• WangEditor - 轻量级富文本编辑器（文档）
• Vue 3 - 渐进式 JavaScript 框架（文档）
• TypeScript - 类型安全（文档）

快速开始

安装

pnpm add @vup/richeditor

基础使用

<script setup lang="ts">
import { ref } from 'vue';
import { RichEditor } from '@vup/richeditor';

const content = ref('<p>初始内容</p>');
</script>

<template>
  <RichEditor v-model="content" />
</template>

组件 API

Props

参数	说明	类型	默认值
modelValue / v-model	编辑器内容（HTML 字符串）	string	必填
mode	编辑器模式	'default' | 'simple'	'default'
excludeKeys	需要排除的工具栏 key	string[]	[]

Events

事件名	说明	参数
update:modelValue	内容变化时触发	(value: string)

使用示例

基础用法

<template>
  <div class="editor-demo">
    <RichEditor v-model="content" />
    <div class="preview">
      <h3>预览内容：</h3>
      <div v-html="content"></div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RichEditor } from '@vup/richeditor';

const content = ref('<p>这是初始内容</p>');
</script>

自定义配置

<template>
  <RichEditor v-model="content" mode="simple" :exclude-keys="excludeKeys" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { RichEditor } from '@vup/richeditor';

const content = ref('');
const excludeKeys = ['group-video', 'group-image'];
</script>

简单模式

简单模式提供基础的文本编辑功能，适合简单的富文本需求：

<template>
  <RichEditor v-model="content" mode="simple" />
</template>

表单集成

与表单组件结合

<template>
  <form @submit.prevent="handleSubmit">
    <VInput v-model="title" placeholder="文章标题" />
    <RichEditor v-model="content" />
    <VButton type="primary" native-type="submit">提交</VButton>
  </form>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VInput, VButton } from '@vup/ui';
import { RichEditor } from '@vup/richeditor';

const title = ref('');
const content = ref('');

const handleSubmit = () => {
  console.log('标题:', title.value);
  console.log('内容:', content.value);
  // 提交表单
};
</script>

获取和设置内容

<template>
  <div>
    <RichEditor v-model="content" />
    <VButton @click="getContent">获取内容</VButton>
    <VButton @click="setContent">设置内容</VButton>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { VButton } from '@vup/ui';
import { RichEditor } from '@vup/richeditor';

const content = ref('');

const getContent = () => {
  console.log('当前内容:', content.value);
};

const setContent = () => {
  content.value = '<p>这是设置的内容</p>';
};
</script>

注意事项

• 该包依赖 @vup/ui，确保已安装 @vup/ui
• 通过 peerDependencies 约束 WangEditor 版本，确保版本兼容性
• 编辑器内容为 HTML 字符串，使用时注意 XSS 防护
• 具体 API 与扩展能力请参考 WangEditor 官方文档
• 如需裁剪工具栏，可通过 excludeKeys 配置

相关资源

• WangEditor 官网
• WangEditor 文档
• @vup/ui 组件库