@vup/richeditor Rich Text Editor

Vue 3 rich text editor wrapper based on WangEditor, providing out-of-the-box rich text editing functionality.

Technical Stack

• WangEditor - Lightweight rich text editor (docs)
• Vue 3 - Progressive JavaScript framework (docs)
• TypeScript - Type safety (docs)

Quick Start

Installation

pnpm add @vup/richeditor

Basic Usage

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

const content = ref('<p>Initial content</p>');
</script>

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

Component API

Props

Parameter	Description	Type	Default
modelValue / v-model	Editor content (HTML string)	string	required
mode	Editor mode	'default' | 'simple'	'default'
excludeKeys	Excluded toolbar keys	string[]	[]

Events

Event Name	Description	Parameters
update:modelValue	Triggered when content changes	(value: string)

Usage Examples

Basic Usage

<template>
  <div class="editor-demo">
    <RichEditor v-model="content" />
    <div class="preview">
      <h3>Preview:</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>This is initial content</p>');
</script>

Custom Configuration

<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>

Simple Mode

Simple mode provides basic text editing functionality, suitable for simple rich text needs:

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

Form Integration

Integration with Form Components

<template>
  <form @submit.prevent="handleSubmit">
    <VInput v-model="title" placeholder="Article title" />
    <RichEditor v-model="content" />
    <VButton type="primary" native-type="submit">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:', title.value);
  console.log('Content:', content.value);
  // Submit form
};
</script>

Get and Set Content

<template>
  <div>
    <RichEditor v-model="content" />
    <VButton @click="getContent">Get Content</VButton>
    <VButton @click="setContent">Set Content</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('Current content:', content.value);
};

const setContent = () => {
  content.value = '<p>This is the set content</p>';
};
</script>

Notes

• This package depends on @vup/ui, ensure @vup/ui is installed
• WangEditor version is constrained via peerDependencies to ensure version compatibility
• Editor content is HTML string, pay attention to XSS protection when using
• For specific APIs and extension capabilities, please refer to WangEditor official documentation
• Toolbar customization is supported via excludeKeys

Related Resources

• WangEditor Website
• WangEditor Documentation
• @vup/ui Component Library