@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
• Vue 3 - Progressive JavaScript framework
• TypeScript - Type safety

Quick Start

Installation

pnpm add @vup/richeditor

Basic Usage

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

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

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

Component API

Props

Parameter	Description	Type	Default
modelValue / v-model	Editor content (HTML string)	string	''
placeholder	Placeholder text	string	'Please enter content'
readonly	Whether read-only	boolean	false
disabled	Whether disabled	boolean	false
height	Editor height	string | number	300
mode	Editor mode	'default' | 'simple'	'default'

Events

Event Name	Description	Parameters
update:modelValue	Triggered when content changes	(value: string)
change	Triggered when content changes	(value: string)
focus	Triggered when focused	(event: FocusEvent)
blur	Triggered when blurred	(event: FocusEvent)

Usage Examples

Basic Usage

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

const content = ref('<p>This is initial content</p>');
</script>

Custom Configuration

<template>
  <VRichEditor
    v-model="content"
    placeholder="Please enter article content..."
    :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('Content changed:', value);
};
</script>

Read-only Mode

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

Simple Mode

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

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

Form Integration

Integration with Form Components

<template>
  <form @submit.prevent="handleSubmit">
    <VInput v-model="title" placeholder="Article title" />
    <VRichEditor v-model="content" placeholder="Article 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 { VRichEditor } 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>
    <VRichEditor ref="editorRef" 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 { VRichEditor } from '@vup/richeditor';

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

const getContent = () => {
  console.log('Current content:', content.value);
  // Or get via ref
  // const html = editorRef.value?.getHtml();
};

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
• If you need to customize toolbar or configuration, you can configure through the editor instance exposed by the component

Related Resources

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