Package Exports
- vix-editor
- vix-editor/style.css
Readme
Echo Editor
A modern AI-powered WYSIWYG rich-text editor for Vue, based on tiptap and shadcn-vue.
English | δΈζ
Demo
Features
- π¨ Beautiful UI with shadcn-vue components
- β¨ AI-powered writing assistance
- π Markdown support with real-time preview
- π€ Rich text formatting (headings, lists, quotes, etc.)
- π Tables and code blocks
- π― Custom font sizes and styles
- π Import from Word documents
- π I18n support (
en_US,zh_CN) - 𧩠Extensible architecture - create your own extensions
- π TypeScript support
- π¨ Tailwind CSS support
Installation
npm install echo-editor
# or
pnpm install echo-editor
# or
yarn add echo-editorUsage
Method 1: Global Registration
// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import EchoEditor from 'echo-editor';
import 'echo-editor/style.css';
const app = createApp(App);
app.use(EchoEditor);
app.mount('#app');<script setup>
import { ref } from 'vue'
import { BaseKit } from 'echo-editor'
const content = ref('')
const extensions = [
BaseKit.configure({
placeholder: {
placeholder: 'Start writing...',
},
}),
]
</script>
<template>
<echo-editor :extensions="extensions" v-model="content" />
</template>Method 2: Direct Usage
<script setup>
import { EchoEditor, BaseKit } from 'echo-editor'
import 'echo-editor/style.css'
const content = ref('')
const extensions = [
BaseKit.configure({
placeholder: {
placeholder: 'Start writing...',
},
}),
]
</script>
<template>
<echo-editor :extensions="extensions" v-model="content" />
</template>Development
- Install pnpm
- Clone the repository
- Run
pnpm install - Start development server with
pnpm dev
To test the build version:
pnpm examplesContributing
Contributions are welcome! Please feel free to submit a Pull Request.