什么是 embed-editor
【embed-editor】是一个基于 Vue.js 开发的富文本编辑器，具有轻量、易用、高效的特点。它简洁而不简单，具有良好的可扩展性，通过 npm 包的方式使用，减少了我们开发环节的时间和成本。
安装
安装 npm 包仅仅需要使用一行命令即可:
npm install embed-editor
需要注意的是，本npm包基于Vue.js 2.0进行开发，因此需要引入Vue。
引入
简单引入方式如下：
import Vue from 'vue' import EmbedEditor from 'embed-editor' Vue.use(EmbedEditor)
使用
全局使用
-- -------------------- ---- -------
----------
------------- -------------------
-----------
--------
------ ------- -
---- -- -
------ -
-------- ---
-
-
-
---------本地使用
-- -------------------- ---- -------
----------
-----
------------- ---------------- --------------- - -----------------------
------
-----------
--------
------ ----------- ---- --------------
------ ------- -
----------- - ----------- --
---- -- -
------ -
-------- ---
-
-
-
---------Props
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|---|---|---|---|---|
| icons | 自定义 iconfont 字体图标 | Array | —— | —— |
| config | 富文本编辑器的配置项 | Object | —— | —— |
| value / v-model | 绑定富文本编辑器的值 | String | —— | —— |
| disabled | 是否禁用富文本编辑器 | Boolean | —— | false |
| image-size-limit | 上传图片的大小限制，单位为 MB | Number | —— | 2 |
| upload-image | 上传图片的方法 | Function | —— | —— |
| upload-video | 上传视频的方法 | Function | —— | —— |
Slots
| 名称 | 说明 |
|---|---|
| —— | 富文本编辑器的额外功能 |
图示
其他
在使用 embed-editor 之前，需要先安装并引入相关的依赖包，例如：Vue、normalize.css、fontawesome 和 quill。
源码
总结
通过本篇文章的学习，我们了解了 npm 包 embed-editor 的用法，并实现了一个示例。使用 embed-editor 能够帮助我们快速开发富文本编辑器，并且能够通过配置项满足各种需求。希望大家能够掌握 embed-editor 的基础使用，为您的开发工作提供帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056f6781e8991b448e79e5