概述
jnet-draft-js 是一个基于 Draft.js 的 React 富文本编辑器库，提供了丰富的可自定义的组件和插件接口。本教程将介绍如何使用 jnet-draft-js 快速创建一个自定义的富文本编辑器。
安装
使用 npm 安装 jnet-draft-js:
$ npm install jnet-draft-js
基本使用
导入模块
import React, { Component } from 'react';
import { Editor } from 'jnet-draft-js';创建编辑器
-- -------------------- ---- -------
----- -------- ------- --------- -
------------------ -
-------------
---------- - - ------------ ------------------------- --
-
-------- - ------------- -- -
--------------- ----------- ---
--
-------- -
------ ------- ------------------------------------ ------------------------ ---
-
-插件
jnet-draft-js 提供了丰富的插件，比如链接、图片、代码块等。我们可以根据需求，添加需要的插件。
链接插件
-- -------------------- ---- -------
------ - ---------- - ---- ----------------
----- ---------- - --- ------------
----------- ------------- ---- -- -
----- ------------ - --------------------------------
----- --------- - ---------------------------
----- ---------------------- - --------------------------
-------
------------
- --- --
--
----- --------- - -------------------------------------------------
----- --------------- - ---------------------
-------------
----------
----
------------------------------------
----------
--
----- -------------- - ---------------------------- -
--------------- ----------------
---
------ ---------------------------
---------------
------------------------------------
--
--
---
----- -------- ------- --------- -
------------------ -
-------------
---------- - - ------------ ------------------------- --
-
-------- - ------------- -- -
--------------- ----------- ---
--
-------- -
------ -
-------
------------------------------------
------------------------
----------------------
--
--
-
-图片插件
-- -------------------- ---- -------
------ - ----------- - ---- ----------------
----- ----------- - --- -------------
------------ ------------- ----- -- -
----- ------------ - --------------------------------
----- ---------------------- - ---------------------------------- ------------ -
---- -------------------------
---
----- --------- - -------------------------------------------------
----- -------------- - ---------------------------- -
--------------- --------------------------------- --------------------------------- - ---
---
------ -------------------------------------------------- ---------- - ---
--
---
----- -------- ------- --------- -
------------------ -
-------------
---------- - - ------------ ------------------------- --
-
-------- - ------------- -- -
--------------- ----------- ---
--
------ - ------- -- -
-------------------- -- -
----- ------ - --- -------------
------------- - -- -- -
----- ----- - --- --------
--------- - --------------
------------ - -- -- -
----- -------------- - ----------------------------------------------- ------
------------------------------
--
--
---------------------------
---
--
-------- -
------ -
-------
------------------------------------
------------------------
-----------------------
--------------------
--
--
-
-参考
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005590981e8991b448d66b2