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

A modern WYSIWYG rich-text editor base on tiptap and shadcn-ui
https://github.com/Seedsa/echo-editor

prosemirror rich-text rich-text-editor shadcn-vue tiptap tiptap-editor vue3 wysiwyg wysiwyg-editor

Last synced: 23 days ago
JSON representation

A modern WYSIWYG rich-text editor base on tiptap and shadcn-ui

• Host: GitHub
• URL: https://github.com/Seedsa/echo-editor
• Owner: Seedsa
• License: mit
• Created: 2024-05-20T01:00:10.000Z (7 months ago)
• Default Branch: main
• Last Pushed: 2024-07-04T03:19:10.000Z (5 months ago)
• Last Synced: 2024-07-11T12:21:40.160Z (5 months ago)
• Topics: prosemirror, rich-text, rich-text-editor, shadcn-vue, tiptap, tiptap-editor, vue3, wysiwyg, wysiwyg-editor
• Language: TypeScript
• Homepage: https://echo-editor.vercel.app
• Size: 1.3 MB
• Stars: 97
• Watchers: 1
• Forks: 10
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-shadcn-ui - echo-editor - A modern WYSIWYG rich-text editor based on tiptap and shadcn/ui (Libs and Components)
• awesome-shadcn-ui - Echo Editor - A modern WYSIWYG rich-text editor base on tiptap and shadcn-ui. (Components)
• awesome-shadcn-ui - Echo Editor - A modern WYSIWYG rich-text editor base on tiptap and shadcn-ui. (Components)

README

        
# Echo Editor

A modern WYSIWYG rich-text editor base on [tiptap](https://tiptap.dev) uses [shadcn-vue](https://www.shadcn-vue.com/) components.

[![MIT License](https://img.shields.io/badge/License-MIT-green.svg)](https://choosealicense.com/licenses/mit/)

[![](https://img.shields.io/npm/v/echo-editor.svg?label=version)](https://www.npmjs.com/package/echo-editor)

[![](https://img.shields.io/npm/dependency-version/echo-editor/peer/vue?color=vue)](https://www.npmjs.com/package/echo-editor)

English | [中文](./README.zh-CN.md)

![App Screenshot](./screenshot/screenshot.png)

## Demo

[Demo](https://echo-editor.jzcloud.site/)

## Features

- Use [shadcn-vue](https://www.shadcn-vue.com/) components

- Markdown support

- TypeScript support

- I18n support(`en`, `zhHans`)

- Create your own extensions

- Tailwind CSS support

## Installation

```bash

  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

import {

  BaseKit,

} from 'echo-editor';

const extensions = [

  BaseKit.configure({

    placeholder: {

      placeholder: '请输入...',

    },

})]

```

## Run Locally

Clone the project

```bash

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

```

Go to the project directory

```bash

  cd echo-editor

```

Install dependencies

```bash

  pnpm install

```

Start the Demo server

```bash

  npm run build:lib

  npm run dev

```

## Related

Here are some related projects

[shadcn-vue](https://www.shadcn-vue.com/)

[tiptap](https://tiptap.dev)

[iconify](https://icon-sets.iconify.design)

## License

[MIT](https://choosealicense.com/licenses/mit/)