4.15.27 • Published 1 month ago
@plugilo/easy-email-editor v4.15.27
Easy-email-editor
Introduction
Email render and preview container.
usage
$ npm install --save easy-email-editor
or
$ yarn add easy-email-editor
import React from "react";
import { BlockManager } from "easy-email-core";
import { EmailEditor, EmailEditorProvider } from "easy-email-editor";
import "easy-email-editor/lib/style.css";
const initialValues = {
subject: "Welcome to Easy-email",
subTitle: "Nice to meet you!",
content: BlockManager.getBlockByType(BasicType.PAGE).create({}),
};
export function App() {
return (
<EmailEditorProvider data={initialValues} height={"calc(100vh - 72px)"}>
{({ values }) => {
return <EmailEditor />;
}}
</EmailEditorProvider>
);
}
customize
If you customize the UI yourself,maybe you need to know
hooks
- useActiveTab // current tab is edit or preview
- useBlock // includes addBlock、moveBlock、removeBlock、undo, redo, etc.
- values // current block form values
- change // formHelpers, assign form values
(name: F, value?: any) => void
- focusBlock // IBlockData
- setFocusBlock // set focusBlock values
(values: IBlockData)=>void
- setFocusBlockValue // assign focusBlock data values
(values: IBlockData)=>void
- setValueByIdx // assign form values by focusIdx
(focusIdx:string, values: IBlockData)=>void
- addBlock
(params: { type: string; parentIdx: string; positionIndex?: number; payload?: any; canReplace?: boolean; }) => void
- moveBlock //
(sourceIdx: string, destinationIdx: string) => null | undefined
- copyBlock //
(idx: string) => void
- removeBlock //
(idx: string) => void
- isExistBlock //
(idx:string)=>boolean
- redo //
() => void
- undo //
() => void
- reset //
() => void
- redoable //
boolean
- undoable //
boolean
- useHoverIdx // hover block related, dragging status related, dragging direction related
- useEditorProps // get props from EmailEditorProvider
- useEditorContext // get form state and initialized status
- useFocusIdx // focus block related
utils (These are some very simple methods, it is best to look at the implementation)
- getBlockNodeByIdx
- getBlockNodes
- getShadowRoot
- scrollBlockEleIntoView
components
- BlockAvatarWrapper // allow drag and drop to editor
4.15.27
1 month ago
4.15.26
1 month ago
4.15.23
2 months ago
4.15.25
2 months ago
4.15.24
2 months ago
4.15.22
2 months ago
4.15.21
2 months ago
4.15.20
3 months ago
4.15.18
4 months ago
4.15.12
9 months ago
4.15.11
10 months ago
4.15.13
8 months ago
4.15.16
7 months ago
4.15.15
8 months ago
4.15.17
7 months ago
4.15.9
10 months ago
4.15.10
10 months ago
4.15.8
11 months ago
4.15.7
11 months ago
4.15.6
11 months ago
4.15.5
11 months ago
4.15.4
11 months ago
4.15.3
11 months ago
4.15.2
11 months ago
4.15.1
11 months ago
4.15.0
12 months ago
4.11.2
12 months ago
4.11.0
12 months ago