前言
Draft.js 是一款由 Facebook 开发并且用于其社交平台上的富文本编辑器。随着社交网络的日益增长,人们对于简洁、高效地在 Web 端上面写作的需求日益增长,并且需要在文本编辑器上有更多的工具来辅助写作。Draft-js-plugin-editor-toolbar-picker 在这个背景下应运而生,通过 CKEditor 和 TinyMCE 这类编辑器的参考,提供了一套工具条样式选择器。
这个 package 可以独立使用,也可以和其它插件结合使用,与其它插件比较有关联性的是 Draft-js-plugin-image,你可以通过这两个插件联合使用,提供一个拥有图片上传和样式选择功能的编辑器。
在本篇文章中,我们会介绍如何使用这个 npm 包,以及如何和富文本编辑器 Draft.js 结合使用,最后我们会展现一个实际的代码案例,旨在能够帮助读者更好地理解这个插件的使用方法。
安装
你可以使用 npm 命令来安装 draft-js-plugin-editor-toolbar-picker
--- ------- ------------------------------------- ------
基本使用
在你的应用中引入 Draft.js 插件后,使用 EditorToolbarPicker
来创建一个选择工具条:
------ ----- ---- -------- ------ ------------------- ---- ---------------------------------------- ------ - ----------- - ---- ----------- ------ - ------ - ---- ---------------------- ----- -------- ------- --------------- - ------------------ - ------------- ---------- - - ------------ -------------------------- -- - ------------------- - ----------- -- - --------------- ----------- --- -- -------- - ----- - ----------- - - ----------- ------ - ----- ------- ------------------------- ---------------------------------------------- ---------- ------ - ---------- ----------------- -- ------- - ---------- -------------------- -- -- -- ------ -- - - ------ ------- ---------
EditorToolbarPicker
接受一个名为 component
的 prop 用于决定在选择器中应该显示的组件。一般来说,需要把可用的样式对象传递给这个组件,以便选择器使用,如下:
------ ----- ---- -------- ------ ------------------- ---- ---------------------------------------- ------ - ----------- - ---- ----------- ------ - ------ - ---- ---------------------- ------ - ------------------- - ---- ------------------------ ----- --------------------- - - - ------ ------- ------ ------ -- - ------ --------- ------ -------- -- - ------ ------------ ------ ----------- -- -- ----- -------- ------- --------------- - ------------------ - ------------- ---------- - - ------------ -------------------------- -- - ------------------- - ----------- -- - --------------- ----------- --- -- -------- - ----- - ----------- - - ----------- ------ - ----- ------- ------------------------- ---------------------------------------------- ---------- ------ - ---------- ----------------- -- ------- - ---------- -------------------- ------ - ---------------- ---------------------- -- -- -- -- ------ -- - - ------ ------- --------- -------- --------------------- ---------------- --------- ----------- -- - ------ - ---- -------------------------------- -------------------------- -- - ----- ------------ - ----------- -- ---------------------------- - ----------------------- ------------------------ - ------------------------- ------ - ----- ------------------------ -------------- -- ---------------------- ------------------ ------------- ------- -- --- ------ -- -
高级使用
当它单独使用时,许多内置的组件(如 BoldButton、ItalicButton、UnderlineButton 等)都可以作为可用的样式传递到 EditorToolbarPicker
组件。你也可以传递自定义的组件或者 HTML 元素或 react 组件作为样式,来获得更多的灵活性。
还有一点需要注意:当使用自定义样式时,你需要为这些样式定义一个唯一的样式名,否则选择器可能无法正常工作。
例如,在下面的例子中,我们提供了一个自定义样式,它是一段嵌入式链接。你可以点击链接按钮将它添加到当前选择器中。
------ ----- ---- -------- ------ ------------------- ---- ---------------------------------------- ------ - ------- ------------ --------- - ---- ----------- ------ --------- ---- ------------- ----- ------- - ------------ ----- ------------ - - ----- - ------ ------- --------------- ------------ -- -- ----- ---------------- ------- --------------- - ------------------ - ------------- ---------- - - ----- --- -- ------------------ - ------------------------------ ----------------------- - ----------------------------------- ----------------- - ----------------------------- - -------------------- - ----------------------- ----- - ----------- - - ----------- ----- --------- - --------------------------- -- -------------------------- - ----- ------------ - -------------------------------- ----- -------- - ------------------------ ----- ----------- - --------------------------- ----- ----- - -------------------------------------- ----- ------- - ------------------------------ -- ----------------------------- - --- ----- ---- - ------- - --------------------------------------------- - --- --------------- ----- ---- -- -- -- - ------------- -- -------------- -- ----------------------- --- --- - - ------------------------- - -- ------------ --- --- - --------------------- - - ------------------- - --------------- ----- ------------------ --- - --------------- - ----- - ------------ -------- - - ----------- ----- ---------- - - ---- --------------- -- ----- ------------ - -------------------------------- ----- ---------------------- - --------------------------------- ---------- ------------ ----- --------- - ------------------------------------------------- ----- -------------- - ---------------------------- - --------------- ---------------------- --- ----- --------- - ------------------------------ ----- --------------- - -------------------------------------------- ---------- ----------- ----- ---------------------- - ------------------------------- - --------------- --------------- --- --------------------------------- - -------- - ----- - ---------- - - ----------- ----- - ---- - - ----------- ------ - ---- ----------------------------- ------ -------------- -- - -------------- - ---------- -- ----------- ---------------- ---- ----------------------------------- ---------------------------- ------------ -- ------- ---------------------------------------- ------ -- - - -------- -------------------------- --------- ------------- - ---------------------------- ------------- ---------- - -------- -------------------- ------------- --------- - ----- ---- - ----------------------- --- --------- --- ----- - -- ----- ---------- - ----------------- --- ----- - -------------- - --------------- ----- - -------------- - -------------------- ----- - ----- - -------------- - ------------------- - - -------- ----------- - ----- - ------------- ---------- -------- - - ------ ----- - --- - - -------------------------------------------- ------ - -- ---------- --------------- ------------- ------------ ---------- ---- -- - -------- -------------------------- - ------ - --------------- ------------- ----------- - - --------- ------------- ---------- ----- -- -- -------------- - ---------- -------------------- ------ - ---------------- - - ------ ------- ------ ------ -- - ------ --------- ------ -------- -- - ------ ------------ ------ ----------- -- - ------ ------- ------ ------ -- -- --------------- -- -- -- - ----- -------- ------- --------------- - ------------------ - ------------- ---------- - - ------------ -------------------------- -- ------------- - ------------------------- --------------------- - --------------------------------- - --------------------- - --------------- ----------- --- - ------------------------- - ----- -------- - -------------------------------------------------- --------- -- ---------- - ------------------------ ------ ----- - ------ ------ - -------- - ------ - ----- ------- ------------------------------------ ---------------------------------------- ------------------------ ------------------------ -- ------ -- - - ------ ------- ---------
结语
通过本文,我们学习了如何使用 Draft.js Plugin Editor Toolbar Picker 这个 npm 包来实现一个带有选择器样式的富文本编辑器。我们也学习了如何和 Draft.js 插件结合使用,和使用自定义的样式组件达到更高的灵活性。
现在,您是否对于富文本编辑器有了更深的了解呢?
参考资料
- Draft.js - https://draftjs.org/
- Draft-js-plugin-editor-toolbar-picker - https://github.com/nikgraf/draft-js-plugins/tree/master/packages/draft-js-plugin-editor-toolbar-picker
- React Draft Wysiwyg - https://github.com/jpuri/react-draft-wysiwyg
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562e281e8991b448e0696