在前端开发中，富文本编辑器是一个常用的功能。常规的富文本编辑器往往过于重量级，不适合用于小型项目或单纯的功能需求。这时候，轻量级的 awe-draft-js 包就变得尤为重要了。
awe-draft-js 是基于 Facebook 的 Draft.js 所开发的一款极简的富文本编辑器，提供了所需的编辑器功能，包括可自定义的工具栏和样式，同时具有无痛添加地多语言支持等特性。
本文将为大家分享 awe-draft-js 的安装和使用教程，包括安装、配置以及编辑器使用说明等。
安装
使用 awe-draft-js 需要先安装相应的依赖包。打开终端，运行以下命令进行安装：
npm install awe-draft-js draft-js -S
使用
初始化
在使用前，需要先在项目中引入 awe-draft-js。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------
------ ------------------------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
-------------- --
--
-
-------- -
------ -
-------
--------------------------------------
----------------------- -- --------------- ------------- ---
--
--
-
-
------ ------- -----------自定义工具栏
可通过传入 toolbarItems 参数自定义生成工具栏内的按钮:
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- -------------- ------------------ --------------- ---------- - ---- ---------------
------ ------------------------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
-------------- --
--
-
-------- -
----- ----------- - -
----------------------
--------------------
-------------------------
----------------------------
--
----- ---------- - -
-----------------
-----------------
-----------------
----------------
--
----- ------------- - -
-----------------------
------------------------
-------------------------------
--------------------------------
--
----- -------------- - -
---------------------- -- --
---- --------------------------------
------ ----------
------ ----------
---
--
----- --------- - ------------- ----------- -------------- ----------------
------ -
---- -----------------------------
-------
--------------------------------------
----------------------- -- --------------- ------------- ---
------------------------
--
------
--
-
-
------ ------- -----------语言国际化
awe-draft-js 提供了无痛添加多语言支持的方式：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- -------------- - ---- ---------------
------ ------------------------------
-- -----
------ ---- ---- ----------------------------------------
----- ---------- ------- --------------- -
------------------ -------- -
------------ ---------
---------- - -
-------------- --
--
-
-------- -
----- ----------- - -
---
--
----- --------- - --------------
------ -
---- -----------------------------
--- ---------------- ---
--------------- --------------
-------
--------------------------------------
----------------------- -- --------------- ------------- ---
--
-----------------
------
--
-
-
------ ------- -----------更多配置
通过 props 可以配置的其他参数:
-- -------------------- ---- ------- ------ - ------- --------------------- ------------------- - ---- --------------- ------- -------------------------------------- ----------------------- -- --------------- ------------- --- ---------- --------- ----------------------------------------- --------------------------------------- ---
祝大家使用愉快！
示例代码
完整的示例代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- -------------- ------------------ --------------- ---------- - ---- ---------------
------ ------------------------------
----- ---------- ------- --------------- -
------------------ -
-------------
---------- - -
-------------- --
--
-
-------- -
----- ----------- - -
----------------------
--------------------
-------------------------
----------------------------
--
----- ---------- - -
-----------------
-----------------
-----------------
----------------
--
----- ------------- - -
-----------------------
------------------------
-------------------------------
--------------------------------
--
----- -------------- - -
---------------------- -- --
---- --------------------------------
------ ----------
------ ----------
---
--
----- --------- - ------------- ----------- -------------- ----------------
------ -
---- -----------------------------
-------
--------------------------------------
----------------------- -- --------------- ------------- ---
------------------------
--
------
--
-
-
------ ------- -----------来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600672683660cf7123b36676