如果您正在寻找一款简单易用的富文本编辑器，推荐您使用 wangeditor-zje，这是一个集成了 wangEditor 和 CodeMirror 的 npm 包。本文将为您提供详细的使用教程，帮助您快速上手 wangeditor-zje。
安装 wangeditor-zje
使用 npm 安装 wangeditor-zje：
npm install wangeditor-zje
引入 wangeditor-zje
在您的项目中引入 wangeditor-zje：
import WangeditorZje from 'wangeditor-zje';
使用 wangeditor-zje
创建一个富文本编辑器实例：
-- -------------------- ---- -------
----- ------ - --- ------------------------ -
------------ --------
------- ----
------------------ -
----- ------------
------ ----------
------------ -----
--------------- --------
-
---其中，第一个参数 #editor 是指定富文本编辑器容器的 DOM 节点，其余参数可以根据需要进行配置。
您还可以选择添加自定义按钮：
-- -------------------- ---- -------
------------------------- - -
------- -- --
----------- -- --
----------- -- --
-------- -- ----
------- -- ----
-------- -- --
------- -- ----
------- -- --
------ -- --
--
------------------------------------- - -------- ---------- --- -
----- --- - --- ----------------
---------------- ----------
------------------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
----
--------- -----
---- ------------------------
--
-
-
--zjeSlidesUploadCB 为自定义批量上传功能。该例中，通过 ajax 请求上传图片，并返回图片链接。返回后，将图片链接回调给编辑器。
示例代码
以下是一个完整的使用示例：
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------- ------------
----- ---------------- -------------------------------------------------------------------------------
-------
------
---- ------------------
------- --------------------------------------------------------------------------------------
--------
----- ------ - --- ------------------------ -
------------ --------
------- ----
------------------ -
----- ------------
------ ----------
------------ -----
--------------- --------
-
---
------------------------- - -
------- -- --
----------- -- --
----------- -- --
-------- -- ----
------- -- ----
-------- -- --
------- -- ----
------- -- --
------ -- --
--
------------------------------------- - -------- ---------- --- -
----- --- - --- ----------------
---------------- ----------
------------------
---------------------- - -------- -- -
-- --------------- --- - -- ---------- --- ---- -
----
--------- -----
---- ------------------------
--
-
-
--
----------------
---------
-------
-------总结
wangeditor-zje 是一款功能丰富、易用的富文本编辑器，您可以轻松地在您的项目中使用它。本文提供了详细的使用教程和示例代码，希望能够帮助您快速上手 wangeditor-zje。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005672681e8991b448e3a38