简介
hf-draft-js是一个基于Draft.js封装的富文本编辑器，它提供了丰富的插件和主题，可以快速地实现一个富文本编辑器。本文将介绍hf-draft-js的基本用法、插件和主题的使用方法，以及如何自定义一个插件和主题。
安装
hf-draft-js可以通过npm安装：
npm install hf-draft-js –s
基本用法
默认主题下的hf-draft-js的使用非常简单，只需要引入组件并传入value和onChange属性即可：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ------ ---- -------------- -------- ----- - ----- ------- --------- - ------------- ----- ------------ - ------ -- - --------------- - ------ - ------- ------------- ----------------------- -- -- - ------ ------- ----展开代码
插件
在hf-draft-js中，插件是一组可以被应用的具有特定功能的组件。通过插件，我们可以为hf-draft-js添加除了默认编辑功能以外更多的功能。hf-draft-js目前内置了一些插件，同时也支持自定义插件。
使用内置插件
如何使用内置插件呢？通过在Editor组件中添加对应的plugin就可以使用了。以代码高亮插件为例：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ------ ---- -------------- ------ ------------------------- ---- ------------------------------------- -------- ----- - ----- ------- --------- - ------------- ----- --------------- - ---------------------------- ----- ------------ - ------ -- - --------------- - ------ - ------- ------------- ----------------------- -------------------------- -- -- - ------ ------- ----展开代码
自定义插件
如何定义自己的插件呢？hf-draft-js的插件其实就是一个react组件，通过传递EditorState和onChange方法来处理Editor的内容。以超链接插件为例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ --------- ---- ------------- ------ - ------------ --------- - ---- ----------- ------ - ------------ - ---- -------------- ------ ------- ----- ---------- ------- --------------- - ------ --------- - - --------- -------------------------- ------------ ---------------------------- -- --------- - ----- - ------------ -------- - - ----------- ----- --------- - --------------------------- ----- --- - -------------------- --- ------ ----- --------- - ----------- -------------------- --------------------- ---------- - --- -- --------------------------- ----- -------------- - --------------------- ------------ ---------- --------- -- ------------------------- - ------------ - ----- - ------------ -------- - - ----------- ----- --------- - --------------------------- ----- -------------- - --------------------------------- ---------- ------ ------------------------- - -------- - ------ ------------ - -展开代码
这里新建了一个LinkPlugin组件，它接受onChange和editorState两个参数，通过window.prompt弹出url输入框，然后创建一个链接实体并调用EditorState的toggleLink方法来为当前选中位置添加或删除链接。需要将该组件注册为插件才能使用，可以在Editor组件中调用plugin属性来注册LinkPlugin。
主题
hf-draft-js主题可以控制编辑器的外观，使之更符合实际需求。hf-draft-js目前内置了一些主题，同时也支持自定义主题。
使用内置主题
内置主题是通过引入css来实现的。以绿色主题为例：
-- -------------------- ---- ------- ------ ------ - -------- - ---- -------- ------ ------ ---- -------------- ------ ---------------------------------- ------ ----------------------------------- -------- ----- - ----- ------- --------- - ------------- ----- ------------ - ------ -- - --------------- - ------ - ------- ------------- ----------------------- ------------- -- -- - ------ ------- ----展开代码
这里引入了base和green两个css文件，将Editor组件的theme属性设置为green即可使用绿色主题。
自定义主题
主题也可以自定义。可以通过hf-draft-js的ThemeProvider组件来实现。以黑色主题为例：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------------- -------------- ------------ - ---- -------------- ------ ------ ---- ----------- ----- ---------- - ----------------- ------------- - -------- ----------------- --------------------- - ---------------- ------- --- ------- ----------------- -------------------- - ---------------- ------- ----------- ------- --- ------ ----------------- ------------------- - ---------------- ------- ------ ------- --- ------- ----------------- -------------------- - ---------------- ------- ------ ------- --- --- ----- --- ------- --------------- - ------------------ - ------------- ---------- - - ------------ -------------------------- -- - ------------------------------- - --------------- ----------- --- - -------- - ------ - -------------- ------------------- ------- ------------------------------------ ----------------------- -- ------------------------------------- -- ---------------- -- - - ------ ------- ----展开代码
这里创建了一个新的主题blackTheme，覆盖了一些默认样式，并将blackTheme传递给ThemeProvider组件。Editor就可以在ThemeProvider的包围下加载出新样式的编辑器。
到这里，本次的hf-draft-js使用教程已经结束。期望对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600558d481e8991b448d625e
