---
tags: 文字編輯器, 瑟拉
---
# 文字編輯器套件

## 候選套件
### [antd - react-quill](https://github.com/zenoamaro/react-quill)
- [demo](https://zenoamaro.github.io/react-quill/)
- antd 官方推薦
- ts 支援

### [mui - mui-rte](https://github.com/niuware/mui-rte)
- [demo](https://codesandbox.io/s/mui-rte-basic-ypfdo?fontsize=14)
- 已經封裝成 MUI 元件
- ts 支援

## 其他候選套件比較圖表
- [openbase](https://openbase.com/vs/js/react-quill-vs-mui-rte-vs-lexical-vs-@tiptap_react?vs=react-quill%2Cmui-rte%2Clexical%2C%40tiptap%2Freact)
- [npm trend](https://npmtrends.com/@lexical/react-vs-@tiptap/react-vs-mui-rte-vs-react-quill)

## reddit : 根據 3 篇 1 年內討論文字編輯器的熱門文章
- [What is the best Rich Text Editor for ReactJS now?
](https://www.reddit.com/r/reactjs/comments/wfip83/what_is_the_best_rich_text_editor_for_reactjs_now/)
- [Any good libraries for rich text editors out there?
](https://www.reddit.com/r/reactjs/comments/107xplc/any_good_libraries_for_rich_text_editors_out_there/)
- [Is there a good alternative to Draft-js rich text editor?
](https://www.reddit.com/r/reactjs/comments/y3v08n/is_there_a_good_alternative_to_draftjs_rich_text/)

<table><thead><tr><th>Text Editor</th><th>Pros</th><th>Cons</th></tr></thead><tbody><tr><td>Draft-js</td><td> Developed by Facebook <br> Active community <br> Supports plugins <br> High performance</td><td> Steep learning curve <br> Limited documentation <br> No official support</td></tr><tr><td>Tiptap</td><td> Easy to use <br> Composable architecture <br> Solid beta version <br> Customizable</td><td> Pricing for pro extensions <br> Beta version may have bugs</td></tr><tr><td>Lexical</td><td> Developed by Facebook <br> Good community and support <br> Regular updates <br> Comes with versions</td><td> Not yet production ready <br> Steep learning curve</td></tr><tr><td>Slate</td><td> Flexible API <br> Good design goals <br> Active community</td><td> No stable version yet <br> May have fundamental issues</td></tr><tr><td>React Quill</td><td> Easy to use <br> Well documented <br> Supports themes and formats</td><td> May not be suitable for advanced features</td></tr><tr><td>TinyMCE</td><td> Mature and reliable <br> Seamless React integration <br> Lots of features and customization options</td><td> Bloated and complex <br> May require additional configuration</td></tr><tr><td>CKEditor</td><td> Easy to use <br> Requires little configuration <br> Integrates well with databases</td><td> Limited customization options <br> Outdated UI</td></tr><tr><td>EditorJS</td><td> Stores content as JSON objects <br> Easy to create custom presentation layers</td><td> Limited features and customization options <br> May not be suitable for complex use cases</td></tr><tr><td>React Page</td><td> More than just a rich text editor <br> Composable architecture <br> Based on Slate</td><td> May not be suitable for basic use cases <br> Limited documentation</td></tr><tr><td>PlateJS</td><td> Built on top of Slate <br> Good customization options <br> Active community</td><td> May not be suitable for basic use cases <br> Limited documentation</td></tr><tr><td>Mantine RTE</td><td> Based on Quill <br> Additional props for customization</td><td>- Limited customization options <br> Limited documentation</td></tr></tbody></table>