@vup/richeditor 富文本编辑器

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

技术栈

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

快速开始

安装

pnpm add @vup/richeditor

基础使用

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

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

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

组件 API

Props

参数	说明	类型	默认值
modelValue / v-model	编辑器内容（HTML 字符串）	string	''
placeholder	占位符文本	string	'请输入内容'
readonly	是否只读	boolean	false
disabled	是否禁用	boolean	false
height	编辑器高度	string | number	300
mode	编辑器模式	'default' | 'simple'	'default'

Events

事件名	说明	参数
update:modelValue	内容变化时触发	(value: string)
change	内容变化时触发	(value: string)
focus	获得焦点时触发	(event: FocusEvent)
blur	失去焦点时触发	(event: FocusEvent)

使用示例

基础用法

<template>
  <div class="editor-demo">
    <VRichEditor 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 { VRichEditor } from '@vup/richeditor';

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

自定义配置

<template>
  <VRichEditor
    v-model="content"
    placeholder="请输入文章内容..."
    :height="400"
    mode="default"
    @change="handleChange"
  />
</template>

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

const content = ref('');

const handleChange = (value: string) => {
  console.log('内容变化:', value);
};
</script>

只读模式

<template>
  <VRichEditor v-model="content" :readonly="true" />
</template>

简单模式

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

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

表单集成

与表单组件结合

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

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

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

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

获取和设置内容

<template>
  <div>
    <VRichEditor ref="editorRef" 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 { VRichEditor } from '@vup/richeditor';

const editorRef = ref<InstanceType<typeof VRichEditor>>();
const content = ref('');

const getContent = () => {
  console.log('当前内容:', content.value);
  // 或者通过 ref 获取
  // const html = editorRef.value?.getHtml();
};

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

注意事项

• 该包依赖 @vup/ui，确保已安装 @vup/ui
• 通过 peerDependencies 约束 WangEditor 版本，确保版本兼容性
• 编辑器内容为 HTML 字符串，使用时注意 XSS 防护
• 具体 API 与扩展能力请参考 WangEditor 官方文档
• 如需自定义工具栏或配置，可以通过组件暴露的编辑器实例进行配置

相关资源

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