A modern AI-powered WYSIWYG rich-text editor for Vue, based on tiptap and shadcn-vue.
English | 中文
- 🎨 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,zhHans) - 🧩 Extensible architecture - create your own extensions
- 🎭 TypeScript support
- 🎨 Tailwind CSS support
npm install echo-editor
# or
pnpm install echo-editor
# or
yarn add echo-editor// 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><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>- Install pnpm
- Clone the repository
- Run
pnpm install - Start development server with
pnpm dev
To test the build version:
pnpm examplesContributions are welcome! Please feel free to submit a Pull Request.