Skip to content

README.md

Latest commit

 

History

History
132 lines (88 loc) · 3.94 KB

README.md

File metadata and controls

132 lines (88 loc) · 3.94 KB
PowerEditor3 Logo

Vue Vite Tiptap NPM Downloads License

A Vue 3 rich text editor powered by Tiptap and VFluent3, built for clean editing experiences in modern web apps.

Documentation · npm · Issues

English | 简体中文

PowerEditor3

PowerEditor3 is a Vue 3 rich text editor component built on top of Tiptap and VFluent3. It packages a ready-to-use editor with toolbar controls, theme switching, image preview, Markdown conversion, mention support, and extension points for business-specific editing flows.

The project is designed for real application pages where rich text needs to be edited, displayed, saved as HTML or JSON, converted to Markdown, or extended with custom upload and decoding logic.

Features

  • Rich text editing based on Tiptap and ProseMirror.
  • Vue 3 plugin installation with global power-editor registration.
  • Light and dark themes, powered by VFluent3 styling.
  • HTML, JSON and Markdown save or conversion workflows.
  • Custom toolbar buttons through Vue slots.
  • Mention item configuration for user, topic or business entity selection.
  • Markdown decoder plugins for custom node and mark serialization.
  • Image interceptor API for upload, replacement and progress status handling.

Installation

Install the package with Yarn:

yarn add @creatorsn/powereditor3

npm and pnpm work in a similar way.

Quick Start

Register PowerEditor3 in your Vue entry file, usually main.js:

import { createApp } from 'vue';
import App from './App.vue';
import PowerEditor from '@creatorsn/powereditor3';
import '@creatorsn/powereditor3/powereditor3.css';

const app = createApp(App);

app.use(PowerEditor);
app.mount('#app');

Then use the editor in your Vue app:

<template>
  <power-editor v-model="content" />
</template>

<script setup>
import { ref } from 'vue';

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

Documentation

Read the full documentation, quick start guide and API reference:

https://creator-sn.github.io/PowerEditor3

Development

Clone the repository and install dependencies:

yarn

Start the VitePress documentation site:

yarn docs:dev

Build the documentation site:

yarn docs:build

Build the library:

yarn build

Related Projects

PowerEditor3 uses VFluent3 for its UI foundation:

https://github.com/Creator-SN/VFluent3

Contributing

PowerEditor3 is still growing, and feedback is welcome.

If you find a bug, have an idea, or want to improve the editor experience, please open an issue or submit a pull request.

License

PowerEditor3 is released under the MIT License.

Copyright (c) 2026 Creator SN