介绍
vue-summernote-lite 是一个基于 Vue.js 的富文本编辑器组件，具有轻量、易用、强大等优点，支持插入图片、链接、表格等功能。
安装
vue-summernote-lite 可以通过 npm 安装：
npm install vue-summernote-lite
快速上手
使用 vue-summernote-lite 只需要在组件中引入即可：
-- -------------------- ---- -------
----------
-----
-------------------- ----------------- --
------
-----------
--------
------ ----------------- ---- ---------------------
------ ------- -
----------- -
-----------------
--
------ -
------ -
-------- --
-
-
-
---------API
Props
| Props 名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | '' | 绑定的内容 |
| config | Object | {} | 配置项，详见 Config |
Methods
| Methods 名称 | 参数 | 返回值 | 说明 |
|---|---|---|---|
| exportHtml | 无 | String | 导出编辑的 HTML |
Config
vue-summernote-lite 支持以下配置项：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| height | Number | 200 | 编辑器的高度 |
| lang | String | 'zh-CN' | 编辑器的语言 |
| toolbar | Array | [] | 工具栏，详见 工具栏 |
| disableDragAndDrop | Boolean | false | 是否禁用拖拽上传 |
工具栏
工具栏中的每个工具可以使用字符串表示，也可以使用对象表示，其中 "-" 表示添加一个分隔线，例如：
-- -------------------- ---- ------- -- ----- -------- - ------- ----------- -------- ------- --------- ------------ -------- ----- ----- ------------ ---- -------- -------- ------- ----- ------- ------ - -- ---- -------- - - ----- ------- ------ ------------ ----------- -- - ----- -------- ------ -------- --------- ------------ -------- -- - ----- ------- ------ ------ ----- ------------ -- - ----- --------- ------ --------- -------- ------- ----- -- - ----- ---------- ------ -------- ------- - -
示例
以下示例演示了如何在 vue-summernote-lite 中插入图片。
-- -------------------- ---- -------
----------
-----
--------------------
-----------------
----------------
------------
--
------- ----------------------------------
------
-----------
--------
------ ----------------- ---- ---------------------
------ ------- -
----------- -
-----------------
--
------ -
------ -
-------- ---
------- -
-------- -
------- ----------- -------- -------
--------- ------------ -------- -------
-
-
-
--
-------- -
------------- -
----- ---- - --- -----
-----
-----------
- ----- ----------- -
-
------------------------------------ -------- -- -
------------------ ------ --------------
--
-
-
-
---------结语
vue-summernote-lite 是一个简单易用的富文本编辑器组件，可以满足大部分富文本编辑的需求，还支持自定义工具栏和配置项。希望这篇教程能够帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60065b43c6eb7e50355dbde4