Skip to content

Seedsa/echo-editor

Folders and files

NameName
Last commit message
Last commit date

Latest commit

d5ec6b3 · Oct 10, 2024
Sep 26, 2024
May 27, 2024
Oct 10, 2024
May 20, 2024
May 21, 2024
May 20, 2024
May 23, 2024
May 22, 2024
May 23, 2024
May 20, 2024
May 20, 2024
Aug 8, 2024
Aug 8, 2024
May 20, 2024
May 20, 2024
May 22, 2024
Oct 10, 2024
Sep 26, 2024
May 20, 2024
May 23, 2024
May 20, 2024
Sep 23, 2024
Sep 23, 2024

Repository files navigation

Echo Editor

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

MIT License

English | 中文

App Screenshot

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