ภาพโดย JK_Studio จาก Pixabay
โปรแกรมแก้ไขแบบ WYSIWYG เป็นหนึ่งในองค์ประกอบหลักของระบบจัดการเนื้อหา (CMS) โปรแกรมแก้ไข HTML แบบ WYSIWYG ที่มีโค้ดอย่างดีและเต็มไปด้วยคุณลักษณะ สามารถแยกความแตกต่างระหว่างสิ่งที่ผู้ใช้ CMS ชื่นชอบและสิ่งที่ไม่สามารถต้านทานได้
แม้ว่าโปรแกรมแก้ไข WYSIWYG ทั้งหมดจะมีชุดฟังก์ชันพื้นฐาน แต่พลังของปลั๊กอินช่วยปรับปรุงประสบการณ์การแก้ไข ปลั๊กอินช่วยให้โปรแกรมแก้ไข WYSIWYG ทำสิ่งต่างๆ ได้มากขึ้นและมอบคุณลักษณะขั้นสูงให้กับผู้ใช้
ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องพิจารณาปลั๊กอินบางตัวที่ทำให้โปรแกรมแก้ไขแบบ WYSIWYG บางตัวอยู่เหนือตัวอื่นๆ สิ่งสำคัญคือต้องตรวจสอบว่าคุณสามารถเพิ่มปลั๊กอินเหล่านี้ได้ง่ายเพียงใด
ในบทความนี้ เราจะพาคุณเข้าสู่โลกของตัวแก้ไขและปลั๊กอินแบบ WYSIWYG เพื่อให้คุณสามารถยกระดับการแก้ไขของผู้ใช้ไปอีกระดับ
ไลบรารีปลั๊กอิน
Froala มีปลั๊กอินมากมายให้ดาวน์โหลดบนเว็บไซต์ของพวกเขา:
โปรแกรมแก้ไข WYSIWYG ที่ยอดเยี่ยมควรมีปลั๊กอินจำนวนมากที่รวมและใช้งานได้ง่าย เนื่องจากยิ่งมีปลั๊กอินมากเท่าใด ตัวแก้ไขก็จะยิ่งใช้งานได้หลากหลายมากขึ้นเท่านั้น และกรณีการใช้งานก็สามารถรองรับได้มากขึ้น
ยิ่งไปกว่านั้น ยิ่งปลั๊กอินที่ใช้งานง่ายและเป็นมิตรกับนักพัฒนามากเท่าใด การปรับใช้ก็จะยิ่งเร็วขึ้นเท่านั้น
รูปภาพด้านล่างแสดงให้เห็นว่าโปรแกรมแก้ไขแบบ WYSIWYG มักจะแสดงรายการปลั๊กอินบนเว็บไซต์และเอกสารประกอบ ดังนั้น ผู้ใช้จะพบคุณลักษณะเพิ่มเติมที่ต้องการได้ไม่ยาก
ปลั๊กอินที่ได้รับความนิยมและทรงพลังที่สุดบางส่วนมีดังนี้:
- ลากได้ – ลากและวางเนื้อหาที่หลากหลาย ตั้งแต่รูปภาพไปจนถึงวิดีโอ ข้ามช่องเนื้อหา
- Code Beautifier – ปรับปรุงการจัดรูปแบบโค้ดในเนื้อหาด้วยสายตา ซึ่งมีความสำคัญเป็นพิเศษสำหรับบล็อกเกอร์ด้านเทคโนโลยี
- ตัวจัดการไฟล์ – ปลั๊กอินพิเศษสำหรับจัดการรูปภาพและไฟล์อื่นๆ
- Image TUI – ให้คุณเพิ่มฟิลเตอร์และลายน้ำให้กับภาพได้ทันที
- รองรับ Markdown – เขียนและจัดรูปแบบเนื้อหาด้วย Markdown — ประหยัดเวลาได้มากสำหรับผู้สร้างเนื้อหาจำนวนมาก
- ตัวตรวจสอบการ สะกดและไวยากรณ์ – ตรวจสอบให้แน่ใจว่าผู้ใช้จะสามารถระบุและแก้ไขข้อผิดพลาดทางไวยากรณ์และการสะกดคำขณะพิมพ์ได้
- การทำงานร่วมกันแบบเรียลไทม์ – ให้ผู้ใช้ทำงานร่วมกัน สร้าง ตรวจสอบ แก้ไขเนื้อหา และพูดถึงผู้อื่นแบบเรียลไทม์
การใช้ปลั๊กอิน
มาดูวิธีที่คุณสามารถเพิ่มปลั๊กอินในโปรแกรมแก้ไขแบบ WYSIWYG ได้ ในกรณีส่วนใหญ่ ในการเข้าถึงปลั๊กอิน คุณจะต้องแทรกไฟล์ JavaScript และ CSS เท่านั้น:
<!-- รวมไฟล์ CSS ของปลั๊กอิน Tables -->
<link rel="stylesheet" href="../css/plugins/table.min.css">
<!-- รวมไฟล์ JS ปลั๊กอินของ Tables -->
<script src="../js/plugins/table.min.js"></script>
จากนั้น ในการรวมปลั๊กอินในอินสแตนซ์ตัวแก้ไข ให้เพิ่มลงในคีย์ pluginsEnabled (หรือเทียบเท่าในโปรแกรมแก้ไขที่คุณต้องการ):
ตัวแก้ไข const = ใหม่ FroalaEditor ('#editor-element', {
pluginsEnabled: ['ตาราง'],
// ... config เพิ่มเติม
});
นั่นคือทั้งหมดที่ใช้ในการเริ่มใช้ปลั๊กอินตัวแก้ไข WYSIWYG ที่คุณเลือก คุณสามารถลองใช้ตัวอย่างส่วนขยายแบบลากแล้ววางที่ยอดเยี่ยมนี้เพื่อดูเพิ่มเติมว่าปลั๊กอินมีประโยชน์เพียงใด
การสร้างปลั๊กอิน
โปรแกรมแก้ไขแบบ WYSIWYG บางตัวช่วยให้คุณสร้างปลั๊กอินได้ในไม่กี่ขั้นตอนง่ายๆ ตัวอย่างเช่น นี่คือโค้ดรูปแบบทั่วไปที่ลดขนาดลงสำหรับการสร้างปลั๊กอินในตัวแก้ไข:
(ฟังก์ชัน (FroalaEditor) {
// เพิ่มตัวเลือกสำหรับปลั๊กอินของคุณ
FroalaEditor.DEFAULTS = Object.assign (FroalaEditor.DEFAULTS, {
myOption: เท็จ
});
// กำหนดปลั๊กอิน
// พารามิเตอร์ตัวแก้ไขคืออินสแตนซ์ปัจจุบัน
FroalaEditor.PLUGINS.myPlugin = ฟังก์ชัน (ตัวแก้ไข) {
// ตัวแปรส่วนตัวมองเห็นได้ภายในขอบเขตของปลั๊กอินเท่านั้น
var private_var = 'ปลั๊กอินที่ยอดเยี่ยมของฉัน';
// เมธอดส่วนตัวที่มองเห็นได้เฉพาะในขอบเขตของปลั๊กอิน
ฟังก์ชัน _privateMethod () {
console.log (ส่วนตัว_var);
}
// เมธอดสาธารณะที่มองเห็นได้ในขอบเขตอินสแตนซ์
ฟังก์ชั่น publicMethod () {
console.log (_privateMethod());
}
// จุดเริ่มต้นสำหรับปลั๊กอินของคุณ
ฟังก์ชัน _init () {
// คุณสามารถเข้าถึงตัวเลือกใดก็ได้จากเอกสารประกอบหรือตัวเลือกที่คุณกำหนดเอง
console.log (editor.opts.myOption)
// เรียกวิธีการใดก็ได้จากเอกสาร
// editor.methodName(พารามิเตอร์);
// คุณสามารถฟังเหตุการณ์ใดก็ได้จากเอกสาร
// editor.events.add('contentChanged', (params) => {});
}
// เปิดเผยวิธีการสาธารณะ หาก _init ไม่เป็นสาธารณะ ปลั๊กอินจะไม่ถูกเตรียมใช้งาน
// วิธีสาธารณะสามารถเข้าถึงได้ผ่านตัวแก้ไข API:
// editor.myPlugin.publicMethod();
กลับ {
_ในนั้น,
วิธีสาธารณะ
}
}
})(FroalaEditor);
อย่างที่คุณเห็น การทำให้ปลั๊กอินของคุณมีโครงสร้างที่ค่อนข้างตรงไปตรงมา หากคุณมีตัวแก้ไขแบบ WYSIWYG ที่เหมาะสม
Froala เป็น โปรแกรมแก้ไข HTML ที่มีไลบรารีปลั๊กอิน ทำให้เป็นตัวเลือกที่ดีสำหรับตัวแก้ไข WYSIWYG ใน CMS ของคุณ
ที่เก็บปลั๊กอินที่มีอยู่มีฟังก์ชันการทำงานที่ยอดเยี่ยม และการสร้างปลั๊กอินด้วย Froala นั้นง่ายมาก ปลั๊กอินแก้ไข Markdown เพียงอย่างเดียวก็คุ้มค่าสำหรับนักเขียนเช่นฉัน!
ดังนั้นคุณมีมัน คุณได้เรียนรู้เกี่ยวกับปลั๊กอินที่ดีที่สุดบางตัวที่คุณควรมองหาในตัวแก้ไขแบบ WYSIWYG การเพิ่มและการใช้ปลั๊กอินในตัวแก้ไขเหล่านี้ และแม้แต่การสร้างปลั๊กอินของคุณ
ซึ่งน่าจะเพียงพอสำหรับคุณในการแก้ไขเนื้อหาของผู้ใช้ด้วยตัวแก้ไขแบบ WYSIWYG ในระดับที่สูงขึ้น
โพสต์ How Plugins Enhance The WYSIWYG Editing Experience (Sponsored) ปรากฏตัวครั้งแรกใน บล็อกของ David Walsh
