Echo Editor

A modern WYSIWYG rich-text editor base on tiptap uses shadcn-vue components.

English | 中文

Demo

Demo

Features

• Use shadcn-vue components
• Markdown support
• TypeScript support
• I18n support(en, zhHans)
• Create your own extensions
• Tailwind CSS support

Installation

  npm install echo-editor
  pnpm install echo-editor
  yarn add echo-editor

Usage

// 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')

// App.vue
<script setup>
import {
  BaseKit,
} from 'echo-editor';

const extensions = [
  BaseKit.configure({
    placeholder: {
      placeholder: '请输入...',
    },
})]
</script>

<template>
<echo-editor
    :extensions="extensions"
/>
</template>

Run Locally

Clone the project

  git clone https://github.com/Seedsa/echo-editor.git

Go to the project directory

  cd echo-editor

Install dependencies

  pnpm install

Start the Demo server

  npm run build:lib
  npm run dev

Related

Here are some related projects

shadcn-vue

tiptap

iconify

License

MIT