echo-editor

Echo Editor

A modern AI-powered WYSIWYG rich-text editor for Vue, based on tiptap and shadcn-vue.

English | 中文

Demo

Live 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, zhHans)
• 🧩 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-editor

Usage

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 examples

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Related Projects

• shadcn-vue
• tiptap
• iconify

License

MIT