**做个比喻:如果把富文本内容比作一幅画,Draft.js 只提供了画纸和画笔,至于怎么画,开发者享有很大的自由 ——(出自文章:Draft.js 在知乎的实践)。...因为 Draft.js 是一个基于 React 的编辑器,我们可以直接在编辑器中渲染出一个 React 组件 如下图: ?...展示富文本编辑器 以上两个特征也正是基于 Draft.js 的多功能编辑器优于 Markdown 编辑器的关键点。...如果 isDraftJson(rawContent) 判别为 false,那么就表示无法被 Draft.js 解析,需要兼容历史 Markdown 语法,由 marked.js 解析出富文本后再交给 Draft.js...举一个例子:按照 Draft.js 的设计,每一个区块之间上下都会有个空行。如图: ?
可以构建类似 Medium、Dropbox Paper 或 Google Docs 的富文本编辑器 通过一系列插件实现所有逻辑,避免代码复杂度 受到 Draft.js、Prosemirror 和 Quill
Github: https://github.com/software-mansion/react-native-svg 3.megadraft 基于 Facebook Draft.js 的富文本编辑器
尽量不要使用该属性,除非你要构建一个类似Draft.js(https://facebook.github.io/draft-js/) 的手动管理 contentEditable 属性的库。
一、富文本编辑器 富文本编辑器市面上已经有很多优秀的开源版本了,但是问题在于每个产品的富文本编辑器需求不一样,所以可能导致有一些时候需要手撸编辑器 ---- 例如: Draft.js Slate.js
PromiseMirror),Confluence WIKI以及SAAS 产品内集成的知识库(Teambition Thoughts、Pingcode 等等);技术产品包括CKEditor、TinyMCE、Draft.js
,这其中有仅提供引擎的编辑器例如Slate.js,也有提供了部分开箱即用的功能的例如Quill.js,也有基于这些引擎二次开发的例如Plate.js,本文主要介绍了Slate.js、Quill.js、Draft.js...Draft.js draft是用于在React中构建富文本编辑器的框架,其为创建和自定义文本编辑器提供了强大的API,并且旨在易于扩展和与其他库集成,与React结合可以使开发者在进行编辑器开发时既不用操作
,但是看了源码之后发现这个库的很多兼容性的问题都没有考虑到,比如 这篇 Stackoverflow 上的讨论,再加上上面提到的蛋疼 Issue,如果真要在生产环境实现富文本最好不要用这个库,推荐使用 draft.js
虽然能用,用户体验可真是无语凝噎 接着,我就开始了折腾之路,我花了两周时间调研了市面上比较成熟的编辑器,比如,Draft.js 、Quill.js、ProseMirror、这些优秀的后起之秀,在比如TinyMCE...但是前提是你要自己去实现view 层,并且有这个开发能力 2、如果项目小而美,只需要用富文本的常用功能,不需要定制,那么其实可选择的范围还是比较宽泛的,基本现在市面上所有的开箱即用的富文本都适合你比如 Draft.js
万⾏代码 早期的轻量级编辑器 L1 1、基于 contenteditable 2、不⽤ document.execCommand,⾃主实现 3、⼏万⾏~⼏⼗万⾏代码 CKEditor、TinyMCE Draft.js
于是乎,为了探索更好的文档交互方式,我们陆陆续续参考了一系列的编辑器:CodeMirror、Draft.js、Lexical、ProseMirror 等。
LinguiJS FBT 建议: react-i18next React 富文本编辑器 当涉及到在 React 中的富文本编辑器时,我只能想到以下内容,因为我没有在 React 中使用任何其他内容: Draft.js
github.com/ChromeDevTools/awesome-chrome-devtools PostCSS https://github.com/jjaderg/awesome-postcss Draft.js
而类似于Draft.js、Slate.js,他们是富文本编辑器的core或者叫做controller,并不是一个完整的功能,这样就能够让我们有非常高的可定制性,当然也就会造成开发所需要的时间比较多。
react-i18next:https://github.com/i18next/react-i18next ---- 富文本编辑 React 中的富文本编辑器,就简单推荐下面几个,我也没太多用过: Draft.js
先了解怎么设计一款编辑器,做下铺垫,参考 facebook draft-js 的介绍视频 (Draft.js was introduced at React.js Conf in February 2016
ClearX为您的React应用程序分离关注点提供了极大的灵活性 react-snap - 针对SPA的零配置框架无关的静态预渲染 Draft.js - 用于构建文本编辑器的React框架 refract
Draft.js - 用于构建文本编辑器的React框架。
Draft.js - 一个构建文本编辑器的反应框架。
领取专属 10元无门槛券
手把手带您无忧上云