draft-js-toolbar-link-plugin 是一个基于 Draft.js 编辑器的插件,可以为编辑器添加链接插入功能,方便用户快速插入链接。
安装
可以通过 npm 来安装 draft-js-toolbar-link-plugin:
- --- ------- ---------------------------- ------
引入
在项目中使用之前,需要先引入插件:
------ ------------------- ---- ------------------------------- ----- ------------- - ----------------------
然后将插件加入到 Draft.js 编辑器中:
----- - ------- - - -------------- ----- ------- - ---------------- ----- ------ - -------------------------------------------------- ----------- ----- ---------- - -- -------- -- -- - ------- -------------------- ------------------- ----------------- -------------------- -- --
使用
使用非常简单!只需要在你的工具栏中添加一个链接按钮:
--------- --- ----- ----------- -- ----------
然后实现 LinkButton 组件:
------ ------ - --------- - ---- -------- ------ - ------------ --------- - ---- ----------- ------ - ---------- - ---- ------------------------------- ----- ---------------- ------- --------- - ----------- - -- -- - ----- - ------------ -------- - - ----------- -- ------------------ ----- --- - -------------------- --- ------ ----- ---- - -------------------- --- ------- ----- ------------ - -------------------------------- ----- ---------------------- - -------------------------- ------- ---------- - ---- ------- --------- - -- ----- --------- - ------------------------------------------------- ----- -------------- - ---------------------------- - --------------- --------------------- -------------------------------- --------------------------- --------- -- --- ------------------------- -- -------- - ------ - ----------- -------------------------------------------- -- - -
现在,你的工具栏上就有了一个链接按钮,用户可以点击这个按钮,弹出输入框,输入链接和文本,即可插入一个链接。
总结
draft-js-toolbar-link-plugin 可以为 Draft.js 编辑器添加链接插入功能,使用非常简单,只需要在工具栏中添加一个链接按钮,然后弹出输入框,输入链接和文本即可插入链接。这对前端开发人员来说非常有用,特别是在需要快速生成链接的情况下。
示例代码见:https://github.com/draft-js-plugins/draft-js-plugins/tree/master/packages/toolbar-link
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/600562dc81e8991b448e04b1