echo-editor

echo-editor

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

Stars: 395

Visit
 screenshot

Echo Editor is a modern AI-powered WYSIWYG rich-text editor for Vue, featuring a beautiful UI with shadcn-vue components. It provides AI-powered writing assistance, Markdown support with real-time preview, rich text formatting, tables, code blocks, custom font sizes and styles, Word document import, I18n support, extensible architecture for creating extensions, TypeScript and Tailwind CSS support. The tool aims to enhance the writing experience by combining advanced features with user-friendly design.

README:

Echo Editor

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

MIT License

English | δΈ­ζ–‡

App Screenshot

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

  1. Install pnpm
  2. Clone the repository
  3. Run pnpm install
  4. 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

License

MIT

For Tasks:

Click tags to check more tools for each tasks

For Jobs:

Alternative AI tools for echo-editor

Similar Open Source Tools

For similar tasks

For similar jobs