@cyberbiz-corp/葡萄干编辑器
安装
yarn add @cyberbiz-corp/grapesjs-editor
使用量
import '@cyberbiz-corp/pitaya-ui/dist/style.css'
import '@cyberbiz-corp/grapesjs-editor/dist/style.css'
CSS两个文件都必须手动导入,否则编辑器不会正确渲染.
import { useTranslation } from 'react-i18next'
import { EmailEditorProvider, EmailLayout } from '@cyberbiz-corp/grapesjs-editor'
const EdmEditPage = () => {
const { i18n } = useTranslation()
return (
<EmailEditorProvider
context={{ edmId: 1, shopDomain: 'example.com', title: 'My EDM' }}
provider={storageProvider}
i18n={i18n}
onLoad={(result) => {}}
onDirtyChange={(dirty) => {}}
onSaved={() => {}}
onError={(error) => {}}
components={{ LinkPicker, ImageUpload }}
>
<EmailLayout toolbar={<YourToolbar />} />
</EmailEditorProvider>
)
}
同伴依赖关系
此软件包使用主机应用程序的现有依赖性而不是捆绑它们.
| 软件包 | 版本 | 说明 |
|---|---|---|
| 反应 | ^17.0.1 (中文(简体) ) | 运行时间 |
| 反应大小 | 第16.13.1号决定 | 运行时间 |
| 样式组件 | ^ 5.2.1 (中文(简体) ) | 所需时间 @cyberbiz-corp/pitaya-ui |
| 反应- i18next | ^ 14.1.2 (中文(简体) ) | 编辑 UI 翻译 |
| 下一个i18 | ^23.11.5 (韩语) | 编辑 UI 翻译 |
| 反应 - 选择 | ^ 3.2.0 (中文(简体) ) | 在样式面板中选择/下拉字段 |
| 反应- 颜色 | ^ 5.6.1 (韩语) | 样式板的取色器 |
| 摇篮 | ^ 4.18.1 (中文(简体) ) | 公用事业功能 |
| 乌伊德 | (单位:千美元) | 用于窗体输入的唯一 ID 生成 |
| @ cyberbiz- corp/ pitaya- ui | ^0.44.0 (中文(简体) ) | 内部 UI 组件库 |
| @fortawesome/fontawesome-svg-core (英语) | ^1.2.25 (中文(简体) ) | 编辑器 UI 中的图标 |
| @fortawesome/free-solid-svg-icons (英语) | • 5.11.2 | 编辑器 UI 中的图标 |
| @ fortawesome/ react-fontawesome (英语) | ^ 0.2.2 (中文(简体) ) | 编辑器 UI 中的图标 |
电子邮件编辑器提供道具
| Prop | 需求 | 说明 |
|---|---|---|
context.edmId | ✅ | EDM 记录 ID |
context.shopDomain | ✅ | 商店域 |
context.title | ✅ | 行政领导和管理标题 |
provider | ✅ | 用于装入/保存EDM数据的存储适配器 |
i18n | ✅ | 主机应用程序的 i18 次例 |
onLoad | ✅ | 在编辑器加载后调用, 并加载结果 |
onDirtyChange | ✅ | 未保存的更改状态更改时调用 |
onSaved | ✅ | 成功保存后调用 |
onError | —— 说 | 调用内部编辑器错误( 如图像删除失败) |
components.LinkPicker | —— 说 | 自定义链接拾取器组件, 返回默认值 |
components.ImageUpload | —— 说 | 自定义图像上传组件, 返回默认值 |
鸣谢
建造在 葡萄JS( 葡萄) (BSD 3-Clause © Artur Arseniev).