0.3.3 • Published 7 months ago
moki-editor v0.3.3
Moki Editor
Live Demo
🚀 ClearLove Moki
Introduction
Moki Editor provides a multifunctional editor, written with TipTap + React + Typescript;
- 😍 DIY Toolbar/InlineBar
- 💎 Export Json/Html
- ⚙️ Typescript declaration
- 💌 Free and open source
TODO
- ✅️ ToolBar
- ✅️ Block Quote
- ✅️ Bold
- ✅️ Emoji Pick
- ✅️ Inline Code
- ✅️ Italic
- ✅️ List
- ✅️ Strike
- ✅️ Subscript
- ✅️ Superscript
- ✅️ Text Align
- ✅️ Underline
- ✅️ Order Line
- Iframe
- Block Code
- ✅️ Placeholder
- ✅️ Table
- Image
- ✅️ TaskItem
- ✅️ Font Style
- ✅️ Font Highlight
- ✅️ Font Color
- Link
Props
| 属性 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| ref | Editor | Editor/null | / |
| content | 编辑器内容 | string/null | null |
| editable | 是否可以编辑 | Boolean | true |
| extensions | 插件配置 | Array<AnyExtension/AnyExtension[]> | [] |
| isToolBar | 是否展示工具栏 | Boolean | true |
| autofocus | 是否聚焦 | Boolean | true |
| onUpdate | 文档修改事件 | ((props: { editor: TipTapEditor, transaction: any }) => void)/undefined | / |
| children | 自定义工具栏内容 | React.ReactNode | / |
Test
git clone https://github.com/ClearLuvMoki/Moki-Editor.git
npm install
npm run dev