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: 5 months 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 (11 months ago)
- Default Branch: main
- Last Pushed: 2024-07-04T03:19:10.000Z (10 months ago)
- Last Synced: 2024-07-11T12:21:40.160Z (9 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 - Link - 06-07 | (Libs and Components)
- 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 based on tiptap and shadcn/ui (Libs and 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.
[](https://choosealicense.com/licenses/mit/)
[](https://www.npmjs.com/package/echo-editor)
[](https://www.npmjs.com/package/echo-editor)
English | [中文](./README.zh-CN.md)
## 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/)