简介
ddv-wangeditor 是一款基于 wangEditor 编辑器进行封装的 npm 包，旨在为前端开发者提供一个轻量级、易于使用、功能强大的富文本编辑器。该编辑器支持自定义菜单、图片上传、代码高亮和多种样式等功能。
安装
使用 npm 安装 ddv-wangeditor：
npm i ddv-wangeditor --save
使用
1. 引入样式文件
在 HTML 中引入 ddv-wangeditor 样式文件：
<link rel="stylesheet" href="node_modules/ddv-wangeditor/wangEditor.css">
2. 引入 JS 文件
在 HTML 中引入 ddv-wangeditor JS 文件：
<script src="node_modules/ddv-wangeditor/wangEditor.js"></script>
3. 创建编辑器
在 JS 中创建 ddv-wangeditor 编辑器实例：
-- -------------------- ---- -------
----- ------ - --- ------------------------ -
------ -
-------
-------
---------
------------
----------------
------------
------------
-------
-------
----------
--------
-------
--------
--------
-------
------
-
--其中，'editor' 是一个空的 div，用于显示编辑器；menus 参数用于指定菜单栏的具体菜单。
4. 获取编辑器内容
通过 editor.txt 获取编辑器的内容：
const content = editor.txt.html() console.log(content)
5. 设置编辑器内容
通过 editor.txt.html(html) 设置编辑器的内容：
const html = '<p>Hello World!</p>' editor.txt.html(html)
实例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
--------------------- ----------------
----- ---------------- --------------------------------------------------
-------
------
---- ------------------
------- ---------------------------
------- ---------------------------------------------------------
--------
------------- - -------- -- -
----- ------ - --- ------------------------ -
------ -
-------
-------
---------
------------
----------------
------------
------------
-------
-------
----------
--------
-------
--------
--------
-------
------
-
--
----- --------- - ---------------------------------
----------------------------------- -------- -- -
----- ------- - -----------------
--------------------
------------ - --------
--
-
---------
-------
-------指导意义
ddv-wangeditor 封装了 wangEditor 编辑器，并提供了多种样式和功能，旨在方便前端开发者使用富文本编辑器，并提高开发效率。通过学习该技术，并在项目中使用，可以有效提高网站或应用的用户体验和交互性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562b181e8991b448dfefd