หน้าแรก>แหล่งข้อมูลการสร้างเว็บไซต์>ทรัพยากรอื่นๆ
ดาวน์โหลด

บรรณาธิการเล็ก

ตัวแก้ไขข้อความที่เต็มไปด้วย HTML ขนาดเล็กที่เขียนด้วยวานิลลาจาวาสคริปต์

เป้าหมาย

สร้างไลบรารีน้อยกว่า 5 KB (บีบอัด) ที่ช่วยให้องค์ประกอบ HTML ใช้เป็นตัวแก้ไขข้อความที่อุดมไปด้วยใน JavaScript วานิลลาเก่า

สนับสนุน

หากคุณใช้และชอบห้องสมุดนี้อย่าลังเลที่จะสนับสนุนโครงการโอเพ่นซอร์สของฉัน

วิธีการติดตั้ง 

 npm install tiny-editor

หรือโหลดไฟล์ Bundle โดยตรงที่ส่วนท้ายของเอกสาร HTML ของคุณ 

 <script src="https://unpkg.com/tiny-editor/dist/bundle.js"></script>

วิธีใช้

  1. อ้างอิงไลบรารีบรรณาธิการในเอกสาร HTML ของคุณ
  2. เพิ่มแอตทริบิวต์ data-tiny-editor ลงในองค์ประกอบ HTML ที่คุณต้องการแปลงเป็นตัวแก้ไข

วิธีสร้างตัวแก้ไขแบบไดนามิก

ใช้ window.__tinyEditor.transformToEditor() ซึ่งใช้เป็นอาร์กิวเมนต์แรกองค์ประกอบ DOM (โดยปกติจะเป็น <div> ) ที่คุณต้องการเปลี่ยนเป็นตัวแก้ไข อ้างถึงตัวอย่าง /public/index.html สำหรับตัวอย่าง

วิธีการแยกข้อความที่จัดรูปแบบ

ฟังเหตุการณ์ input บนองค์ประกอบตัวแก้ไข HTML 

 document
  .querySelectorAll('[data-tiny-editor]')
  .forEach(editor =>
    editor.addEventListener('input', e => console.log(e.target.innerHTML)
  )
);

วิธีการปรับแต่ง

มีตัวเลือกต่าง ๆ ที่สามารถใช้ในการปรับแต่งวิธีการแก้ไขตัวแก้ไขขนาดเล็ก โดยค่าเริ่มต้นจะเปิดใช้งานทุกตัวเลือก คุณสามารถปิดการใช้งานตัวเลือกโดยใช้แอตทริบิวต์ข้อมูล

ตัวอย่างเช่นคุณสามารถลบปุ่มรูปแบบตัวหนาโดยใช้แอตทริบิวต์ต่อไปนี้: 

 <div data-tiny-editor data-bold="no"></div>

ตัวเลือก

  • data-formatblock="no" : ลบรายการแบบเลื่อนลงสไตล์
  • data-bold="no" : ลบปุ่ม BOLD
  • data-italic="no" :: ลบปุ่มตัวเอียง
  • data-underline="no" : ลบปุ่มขีดเส้นใต้
  • data-fontname="no" : ลบรายการแบบเลื่อนลงแบบอักษร
  • data-forecolor="no" :: ลบปุ่มสีข้อความ
  • data-justifyleft="no" : ลบปุ่มจัดตำแหน่งด้านซ้าย
  • data-justifycenter="no" : ลบปุ่มจัดตำแหน่งกลาง
  • data-justifyright="no" : ลบปุ่มจัดเรียงที่ถูกต้อง
  • data-insertorderedlist="no" : ลบปุ่มรายการหมายเลข
  • data-insertunorderedlist="no" : ลบปุ่มรายการกระสุน
  • data-outdent="no" : ลบปุ่ม droprease redent
  • data-indent="no" : ลบปุ่มเพิ่มการเยื้อง
  • data-remove-format="no" : ลบปุ่มการจัดรูปแบบที่ชัดเจน
  • data-autofocus="no" : ลบออโต้โฟกัสออกจากตัวแก้ไข

เบราว์เซอร์ที่รองรับ

รองรับเบราว์เซอร์ที่ทันสมัย (Chrome, Firefox, Edge, ... ) ตัวแก้ไขเล็ก ๆ ไม่ทำงานบน Internet Explorer

ขยาย
ข้อมูลเพิ่มเติม
แอปที่เกี่ยวข้อง
แนะนำสำหรับคุณ
ข้อมูลที่เกี่ยวข้อง ทั้งหมด