TinyEditor ตัวแก้ไข HTML WYSIWYG ที่เรียบง่ายและใช้งานง่าย

ไม่กี่วันที่ผ่านมาฉันแนะนำบรรณาธิการ XHTML ในประเทศให้คุณ วันนี้ฉันอยากจะแนะนำ TinyEditor ให้คุณ มันเป็นเครื่องมือแก้ไข HTML WYSIWYG ที่ง่ายและง่ายต่อการใช้งานที่เพิ่งเปิดตัวโดย Leigeber.com ซึ่งเป็นบล็อกการออกแบบเว็บต่างประเทศที่รู้จักกันดี

• มันเขียนใน JavaScript และไม่ได้ขึ้นอยู่กับห้องสมุดอื่น ๆ
• นี่คือตัวแก้ไขที่มีน้ำหนักเบาและไฟล์ที่เรียกว่ามีเพียง 8KB
• มันสามารถจัดการข้อกำหนดการจัดรูปแบบ HTML ส่วนใหญ่และฟังก์ชั่นในตัวทำให้แท็กที่สร้างขึ้นง่ายที่สุดเท่าที่จะทำได้
• ไอคอนขนาดเล็กที่ใช้ในตัวแก้ไขใช้เทคโนโลยี CSS Sprite ลดการเชื่อมต่อ HTTP
• ทดสอบผ่านในเบราว์เซอร์กระแสหลัก
• สามารถใช้ในโครงการส่วนบุคคลหรือเชิงพาณิชย์ได้ตามใบอนุญาตครีเอทีฟคอมมอนส์

1. อ้างอิงไฟล์ JS และ CSS ที่จัดทำโดย TinyEditor ในไฟล์หน้าเว็บ
2. การเพิ่มแท็กที่ต้องการโดยตัวแก้ไขในไฟล์หน้าเว็บเป็นจริงเป็น textarea ดังต่อไปนี้

    <textarea id = สไตล์อินพุต = ความกว้าง: 400px; ความสูง: 200px> </textarea>

   โปรดทราบว่าความยาวและความกว้างที่กำหนดไว้ใน Textarea เป็นขนาดของตัวแก้ไข

3. เริ่มต้นตัวแก้ไขผ่านสคริปต์และกำหนดค่าพารามิเตอร์ต่างๆดังนี้:

    ใหม่ tiny.editor.edit ('editor', {id: 'อินพุต', // (ต้อง) Idwidth: 584 ของ textarea ที่กำหนดไว้ในขั้นตอนที่สองด้านบน, // (ไม่บังคับ) ความกว้างของตัวแก้ไข: 175, // (ตัวเลือก) ตัวเลือก CSSCLASS: 'TE', // (ตัวเลือก classrowclass: 'teheader', // (ตัวเลือก) ปุ่มตัวแก้ไขบรรทัด line classdividerclass: 'tedivider', // (เป็นทางเลือก) การควบคุมรูปแบบปุ่มตัวแก้ไข: ['bold', 'italic', 'ขีดเส้นใต้', 'strikethrough', ',', 'superscript' 'Indent', '|', 'leftalign', 'centerign', 'rightalign', 'blockjustify', '|', 'Unformat', '|', 'undo', 'redo', 'n', 'font', '', '', ',', ' // จำเป็น) เพิ่มการควบคุมปุ่มลงในตัวแก้ไขตามต้องการโดยที่ '|' หมายถึงเส้นแบ่งแนวตั้งระหว่างปุ่มฟังก์ชั่นและ 'n' หมายถึงเส้นแบ่งระหว่างส่วนท้ายปุ่มปุ่ม: จริง // (ไม่บังคับ) ไม่ว่า XHTML: จริง, // (ไม่บังคับ) ตัวแก้ไขสร้าง XHTML หรือ HTML TAG CSSFILE: 'style.css', // (ไม่บังคับ) ไฟล์ CSS ภายนอกที่จะแนบกับเนื้อหาของตัวแก้ไข: 'collor', // การแก้ไขพื้นหลังพื้นที่ bodyid: 'editor', // (ไม่บังคับ) ตั้งค่าพื้นที่แก้ไข idfooterclass: 'tefooter', // (ไม่บังคับ) ตั้งค่าตัวแก้ไขด้านล่าง classtoggle: {text: 'ซอร์สโค้ด', Activetext: 'การแสดงภาพ', CSSCLASS: ClassResize: {CSSCLASS: 'Resize'} // (ไม่บังคับ) ตั้งค่าคลาสการปรับขนาดตัวแก้ไขคลาส});

   อาจกล่าวได้ว่าสามารถกำหนดค่าได้สูงและรายการการกำหนดค่าค่อนข้างชัดเจน

ในแอปพลิเคชันจริงของ TinyEditor ควรสังเกตว่าก่อนที่จะส่งเนื้อหาของตัวแก้ไขจะต้องมีการเรียกใช้ฟังก์ชันอินสแตนซ์. โพสต์ () เพื่อให้แน่ใจว่าเนื้อหาภาพล่าสุดในพื้นที่แก้ไขจะถูกแปลงเป็นข้อความแท็ก

ดูตัวอย่าง: http://sandbox.leigeber.com/tinyeeditor/