dnde

ลากและวางโปรแกรมแก้ไขอีเมล

หน้าจอ / การสาธิตสดที่นี่

การติดตั้ง

 # Yarn
yarn add dnd-email-editor

# NPM
npm install dnd-email-editor

สิ่งที่รวมอยู่ด้วย

อุปกรณ์ประกอบฉากที่สามารถส่งผ่านไปยังส่วนประกอบ:

ข้อต่อ	พิมพ์	ค่าเริ่มต้น	ไม่จำเป็น	คำอธิบาย
preview	บูลีน	true	จริง	แสดง/ซ่อนปุ่มตัวอย่าง inbuilt
showUndoRedo	บูลีน	true	จริง	แสดง/ซ่อนปุ่ม undo/redo inbuilt คุณสามารถสร้างฟังก์ชั่น undoredo ของคุณเองด้วย undoredo จากวิธี API ด้านล่าง

บรรณาธิการเปิดเผยวิธีการ API เหล่านี้

• getHtml - ส่งออกการออกแบบเป็นเนื้อหา HTML
• getJson - ส่งออกเป็นสตริง JSON สตริงนี้สามารถใช้กับ loadJson ได้
• loadJson - โหลดการออกแบบที่มีอยู่จากสตริง JSON
• undoredo - เลิกทำและทำซ้ำการกระทำ

การใช้งาน

• การนำเข้า

 import Editor from 'dnd-email-editor' ;

return < Editor / >;

• ตั้งค่า ref โดยใช้ useRef และส่งไปยังตัวแก้ไข

 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 ( ) ) ;
  }
} ;

• ตัวพิมพ์ใหญ่

Inorder เพื่อใช้ typeScrip

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 โดยทั่วไปดังนั้นฉันจึงตัดสินใจทำ

คุณสมบัติ

• อีเมลตอบสนองและเป็นมิตรกับมือถือ
• ออกแบบอีเมลโดย Drag and Drop
• การออกแบบการนำเข้า/ส่งออก
  • ส่งออก/นำเข้าเป็น JSON
  • ส่งออกเป็น html
• จัดการแบบอักษร
  • เพิ่มแบบอักษรที่กำหนดเอง
  • รายการ / เพิ่ม / deletefonts
• กลับไปกลับมาด้วย Undo / Redo
• ดูตัวอย่างการออกแบบในเบราว์เซอร์ (มือถือและพีซี)

สร้างขึ้นด้วย

• ตอบโต้
• MJML
• antd

แรงบันดาลใจจาก

• MailJet
• ผู้ที่ไม่ได้อยู่