echo-editor's Introduction

Echo Editor

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

English | 中文

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

Here are some related projects

shadcn-vue

tiptap

iconify

License

MIT

echo-editor's Issues

可以考虑添加对latex公式的支持吗？

能否考虑支持一下类似于Mathjax或者Katex之类的公式库？

[ERR CSS]css style syntax conflicts with bootstrap style if integrated separately into the project in use.

hello. maybe i'm still here to test and report bugs for the product, after adding more editors the css tag names conflict with some previous css tag names. i see in the original syntax of css is scss but it seems it is not completely scss syntax 100%. so it caused the above errors. if anyone has encountered similar problems can discuss how to fix the error here.