dnde

전자 메일 편집기를 드래그 앤 드롭합니다

여기 스크린 / 라이브 데모

설치

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

포함 된 내용

구성 요소로 전달할 수있는 소품 :

소품	유형	기본	선택 과목	설명
preview	부울	true	진실	내장 미리보기 버튼을 표시/숨기십시오.
showUndoRedo	부울	true	진실	내장 실행 취소/Redo 버튼을 표시/숨기십시오. 아래의 API 메소드의 undoredo 도로 자신만의 실패한 기능을 만들 수 있습니다.

편집기는 이러한 API 메소드를 노출시킵니다

• getHtml 디자인을 HTML 컨텐츠로 내보내십시오
• getJson JSON 문자열로 내보내면이 문자열은 loadJson 과 함께 사용할 수 있습니다.
• loadJson JSON 문자열에서 기존 디자인을로드하십시오
• undoredo 실행 취소 및 작업

용법

• 가져 오기

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• useRef 사용하여 ref 설정하고 편집기에 전달하십시오.

 const ref = React . useRef ( null ) ;

return < Editor ref = { ref } / > ;

• getHtml() , getJson() , loadJson() , undoredo 사용합니다

 const logValues = ( ) => {
  if ( ref . current ) {
    const html = ref . current . getHtml ( ) ;
    const json = ref . current . getJson ( ) ;
    console . log ( html , json ) ;
  }
} ;

const loadJson = ( json : string ) => {
  if ( ref . current ) {
    ref . current . loadJson ( json ) ;
  }
} ;

const performUndoAction = ( ) => {
  if ( ref . current ) {
    ref . current . undoActionCallback ( ) ;

    // to check if undo is possible
    console . log ( 'is undo empty: ' , ref . current . isUndoEmpty ( ) ) ;
  }
} ;

const performRedoAction = ( ) => {
  if ( ref . current ) {
    ref . current . redoActionCallback ( ) ;

    // to check if redo is possible
    console . log ( 'is redo empty: ' , ref . current . isRedoEmpty ( ) ) ;
  }
} ;

• TypeScript

내에서 TypeScript를 사용하고 멋진 정의를 얻으려면 유형을 심판으로 전달하십시오.

import Editor from 'dnd-email-editor';

const ExampleComponent = () => {

- const ref = useRef(null);
+ const ref = useRef<Editor>(null);

  return (
    <Editor ref={ref}/>
  );

}

목적

메일은 a normal html webpage 와 크게 다르기 때문에 웹 사이트를 만들지 만 메일을 만들지 않는 데 도움이되는 많은 드래그 앤 드롭 편집자가 있습니다.

• mail editors 가 있더라도 지불금이없고 open-source 아닙니다.

그러한 예 중 하나는 unlayer 될 것이며, 그것은 OpenSource라고 주장하지만 그렇지 않습니다.

• 소스 코드를보고, 그들은 로더 스크립트 만 제공하고 그것을 open-source 라고 부릅니다.
• 나중에 그들은 당신에게 그 기능에 대한 비용을 지불하도록 요청합니다.

위의 이유와 나는 또한 Drag-n-Drop 편집자들로부터 영감을 얻었으므로, 나는 하나를 만들기로 결정했습니다.

특징

• 응답 및 모바일 친화적 인 이메일
• 드래그 앤 드롭으로 이메일을 디자인합니다
• 수입/내보내기 설계
  • JSON으로 수출/수입
  • HTML로 내보내기
• 글꼴 관리
  • 사용자 정의 글꼴을 추가하십시오
  • 목록 / 추가 / 삭제
• Undo / Redo 로 앞뒤로 이동하십시오
• 브라우저 (모바일 및 PC)의 디자인 미리보기

구축

• 반응
• MJML
• Antd

영감을 받았습니다

• MailJet
• 무제한