前言
@jonny/draft-js
是一个针对 React
的富文本编辑器,使用该编辑器可以方便地实现文本编辑、格式化、撤销等功能。它基于 Facebook
的 draft-js
库开发,是在其基础上进行了二次封装优化的产物。本文将详细介绍如何使用该npm包,包括安装、基本使用和高级应用。
安装
使用 npm
包管理器进行安装:
--- ------- ---------------
基本使用
引入
在组件中引入 @jonny/draft-js
:
------ ------- ---- ------------------ ----- -------- ------------ ---------- - --------
初始化
初始化一个编辑器,设置默认的editorState:
------------------ - ------------- ---------- - ------------- --------------------------- --------------------- - --------------------------------- ------------- - ------------- -- ----------------------------- -
编辑器渲染
通过 Editor
组件渲染初始化好的 editorState
:
------- ------------------------------------ ---------------------------------------- ------------------------ --
高级应用
自定义样式
使用 RichUtils
来添加一个自定义样式,例如加粗:
-------------- - ----------------------------------------------------------------- --------- - -------- - ------ - ----- ------- -------------------------------------------------- ------- ------------------------------------ ---------------------------------------- ------------------------ -- ------ -- -
自定义块级样式
可以通过创建一个 blockRendererFn
来自定义块级样式,例如添加一个图片块:
------ ------------- ------------- --------- ---- ----------- -------- ----------------------------- -------------- --- - ----- ---- - ----------------------- -- ----- --- --------- - ------ - ---------- ------ --------- ------ ------ --- --- ----- ---- -- - - ----- -------- ------- --------------- - ------------------ - ------------- ---------------- - -------------------------- ---------- - ------------- ------------------ ------------- - ------------- -- - ----- ------- - -------------------------------- -- -------- --- ------------------------------------- - ---------------- - ------------ ----------------------------- - -- ----------------- - ----------------------------- - -------- - ------ - ----- ------- ------------------------------------ ------------------------ ------------ --------------------------------- -- ------- --------------------------------------------------- ------ -- - ------------- - -- ----------- ----- ----------- - ----------------------- ----- -------------- - -------------------------------- ----- ---------------- - --------------------------- ----- ----------- - --------------------------------------------- --- -------------- ---- ------------ ----- --------- ----- ----- -------------- --- ------------ ---- ----- ---------- - ---------------------- --------- ------------- ---------- --------------- ----------------- --- --------------- ------------ ----------------------------- ----------- ------------------- --- -- ------------ ------------- -- - ----- ----- - ------------------------------- -- ------- - -------------------- - -- --- - ------------------- - ------ ------------------------------ - -
纯文本模式
当你需要将编辑器设置为纯文本模式时,需要先移除除 EditorBlock
以外所有的块级组件,并移除除 DraftEditorContents
以外所有的行内组件:
-------- ------------------------ -------------- ------- - ----- ---- - ---------------- ------ ---- --- ------------ -- ---- --- ------- -- ---- --- ---------- -- ---- --- ----------- -- ---- --- ------------ -- ---- --- ------------- - ----- -------- ------- --------------- - --------- --- - ------ - ---- ------------- ------- ------------------------------ ------------------------------------ ------------------------ ------------------------------------------ ----------------------------------- ------------------------------- ------------ -- -------------------- ------------------------------------ ------------------------------------------ ---------------- -- ------ -- - -
结语
至此,我们已经介绍了使用 @jonny/draft-js
的基本使用和高级应用。当然,除此之外还有更多的功能和应用场景,希望读者能够自行寻找更深入,更有意义的应用。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562e281e8991b448e06c5