สุดยอด Magento 2 WYSIWYG Editor สำหรับอีคอมเมิร์ซ

เนื้อหา

Magento 2 เป็นหนึ่งในแพลตฟอร์ม CMS โอเพ่นซอร์สที่ใช้กันอย่างแพร่หลายสำหรับร้านค้าออนไลน์ ประมาณ 20% ของเว็บไซต์อีคอมเมิร์ซทั้งหมดทั่วโลกใช้แพลตฟอร์มนี้ และกว่า 155 พันล้านดอลลาร์ได้รับการประมวลผลในธุรกรรมที่จัดการโดยความสามารถของตน

ตัวแก้ไข Magento wysiwyg ช่วยให้แก้ไขเนื้อหาที่เกี่ยวข้องสำหรับทุกคนที่ไม่คุ้นเคยกับ HTML ซึ่งช่วยเร่งการพิมพ์โดยทำให้ไม่จำเป็นต้องระบุแท็กและแอตทริบิวต์ด้วยตนเอง ดังนั้น คุณสามารถเห็นรูปลักษณ์สุดท้ายของโปรเจ็กต์ใน Magento 2 ได้ตั้งแต่เนิ่นๆ

Magento 2 WYSIWYG Editor คืออะไร?

หากคุณสงสัยว่าตัวแก้ไข wysiwyg คืออะไร คุณก็พบคำตอบในที่สุด

WYSIWYG (สิ่งที่คุณเห็นคือสิ่งที่คุณได้รับ) มีไว้สำหรับแก้ไขรูปแบบการนำเสนอของเอกสารโดยไม่ต้องดัดแปลงใด ๆ กับซอร์สโค้ดและเขียนบล็อคด้วยตนเอง ทั้งหมดที่จำเป็นในการจัดการคือองค์ประกอบในตัวของบรรณาธิการเพื่อดูภาพรวมของเอกสาร โปรเจ็กต์ หรือกิจกรรมที่ยังไม่เสร็จ (WYSIWYG Lighting Design)

โปรแกรมเมอร์และผู้เขียนโค้ดมักจะวิพากษ์วิจารณ์แนวทางการออกแบบนี้ โดยบ่นเกี่ยวกับส่วนสำคัญของโค้ด 'สกปรก' ที่เกี่ยวข้อง อย่างไรก็ตาม บรรณาธิการสมัยใหม่ปรับปรุงอย่างต่อเนื่องและบางคนสามารถให้เวิร์กโฟลว์คุณภาพดีโดยมีข้อบกพร่องน้อยที่สุด

ในขั้นต้น เบราว์เซอร์สนับสนุน ความสามารถในการแก้ไขแบบ WYSIWYG เป็นหลัก แต่คุณลักษณะการอ่านค่อยๆ เน้นไปที่การให้ความสำคัญมากขึ้น (ไม่พิจารณาการแก้ไขข้อความในแบบฟอร์มการป้อนข้อมูล) อย่างไรก็ตาม เบราว์เซอร์สมัยใหม่มีความอ่อนไหวต่อการแก้ไขหน้าเว็บเป็นอย่างดี ช่วงเวลาสำคัญที่คุณควรใส่ใจเมื่อทำการเปลี่ยนแปลงใดๆ ได้แก่

โหมดการปรับแต่งสามารถเปิดใช้งานได้สองวิธี:

• designMode - การแก้ไของค์ประกอบแต่ละอย่าง (หน้าต่าง, กรอบ);
• contentEditable - การแก้ไของค์ประกอบด้วยข้อความ

วิธีการ document.execCommand อนุญาตให้เรียกใช้คำสั่ง (การปรับแต่งฟอนต์ การเพิ่มลิงก์ ฯลฯ) สำหรับการแก้ไขพื้นที่และการจัดรูปแบบแท็ก

event.preventDefault ควรใช้เมื่อเปิดการเปลี่ยนแปลงปุ่มกด มิฉะนั้น คำสั่งจะไม่ทำงานในขณะที่ประมวลผลเฉพาะปุ่มเท่านั้น

การตรวจสอบความปลอดภัยของข้อความ ช่วยให้มั่นใจได้ว่ามีองค์ประกอบ JavaScript ที่เป็นอันตรายซึ่งเปิดโอกาสในการโจมตี XSS หรือไม่ ในบางเบราว์เซอร์ (เช่น Firefox) จะเปิดใช้งานตามค่าเริ่มต้น โดยจำกัดการใช้ฟังก์ชันที่เกี่ยวข้องกับบัฟเฟอร์ (เช่น คัดลอก/วาง) ข้อจำกัดสามารถลบออกได้โดยใช้ about:config

หากจำเป็น สามารถสร้างเนื้อหาที่แก้ไขได้ผ่าน HTML ซึ่งช่วยให้คุณทำงานกับ React, Angular และเฟรมเวิร์กอื่นที่คล้ายคลึงกันเพื่อการจัดการส่วนประกอบอย่างละเอียดซึ่งเนื้อหาไม่สามารถแก้ไขได้

โซลูชันซอฟต์แวร์ WYSIWYG 7 อันดับแรก

ตัวแก้ไขแบบ WYSIWYG ใช้สำหรับการสร้างแอพ เว็บไซต์เพื่อวัตถุประสงค์ต่างๆ หรือสำหรับงานการจัดการเนื้อหา พวกเขาไม่จำเป็นต้องมีความรู้เกี่ยวกับ HTML หรือทักษะการเขียนโค้ด

บรรณาธิการที่มีประสิทธิภาพประเภทดังกล่าวควรมีคุณสมบัติดังต่อไปนี้:

• อินเทอร์เฟซการแก้ไขเนื้อหาแบบข้อความแยกต่างหาก
• คุณสมบัติการประมวลผลเอกสารมาตรฐานทั้งหมด
• ความสามารถในการแก้ไขโค้ด & ดูตัวอย่างในสิ่งพิมพ์;
• บูรณาการ ส่งออก และเผยแพร่เนื้อหาผ่านเครื่องมือที่เชื่อมต่อ

โซลูชันซอฟต์แวร์ต่อไปนี้มีให้และอื่นๆ

TinyMCE

หนึ่งในเครื่องมือแก้ไขเอนกประสงค์ที่เข้าถึงได้ง่ายที่สุดซึ่งขับเคลื่อน Atlassian, Medium และ Evernote ท่ามกลางผู้อื่น รองรับการใช้งานคลาวด์และไฮบริด และสามารถรวมเข้ากับเฟรมเวิร์กที่มีชื่อเสียงที่สุด - React, Vue, Angular

วิชวลเอดิเตอร์

วิธีนี้ช่วยให้สามารถทำการเปลี่ยนแปลงและแก้ไขในโครงการได้โดยไม่ต้องผ่านมาร์กอัปข้อความวิกิ

SummerNote

Super Simple WYSIWYG Editor ใน Bootstrap SummerNote - ไลบรารี JavaScript ที่อนุญาตให้สร้างตัวแก้ไขแบบกำหนดเองทางออนไลน์

Quill

ตัวแก้ไขโอเพนซอร์สที่สามารถปรับให้เข้ากับข้อกำหนดที่กำหนดเองและเฉพาะธุรกิจได้อย่างง่ายดายด้วยสถาปัตยกรรมแบบใช้ครั้งเดียวและ API ที่ยืดหยุ่น

บรรณาธิการ Froala

ตัวแก้ไขแบบ JavaScript ที่ผสานรวมกับสภาพแวดล้อมการพัฒนาทั่วไปอย่างง่ายดายและมีอินเทอร์เฟซที่ราบรื่น ชุดปลั๊กอินเฉพาะที่ดีและเอกสารที่มีรายละเอียดเฉพาะปลั๊กอินนี้มีประสิทธิภาพมากกว่าเดิม

CKEditor 4

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

เครื่องมือเนื้อหา

โปรแกรมแก้ไขที่ดีสำหรับเนื้อหาที่ใช้ HTML มีคะแนนผู้ใช้ค่อนข้างสูงเมื่อเทียบกับเครื่องมือ WYSIWYG ที่คล้ายกัน

อ่านเพิ่มเติม: วิธีจ้างนักพัฒนาวีโอไอพีที่ดีที่สุด

Magento 2 WYSIWYG Editor

ในแง่ของการสร้างทรัพยากรอีคอมเมิร์ซที่ใช้ Magento 2 WYSIWYG ใช้สำหรับแก้ไขเนื้อหาแบ็กเอนด์โดยไม่ต้องมีทักษะการเขียนโปรแกรมที่จำเป็น สิ่งเหล่านี้คือตัวแก้ไขพื้นฐานของ Magento โดยเฉพาะ

TinyMCE 4 - WYSIWYG Editor Pro

ตัวแก้ไข magento wysiwyg พื้นฐานที่ปกติจะใช้เป็นค่าเริ่มต้น คุณสมบัติหลัก ได้แก่ :

• การเพิ่มแบบลากและวางสำหรับไฟล์รูปภาพ/วิดีโอ การอัปโหลดหลายรายการ และการปรับแต่งขนาดไฟล์แบบเรียลไทม์
• หัวเรื่องและคำอธิบายอัตโนมัติตามชื่อไฟล์ (รองรับหลายไฟล์รวมถึงไฟล์ที่มีชื่อใน UTF-8 Unicode)
• การเพิ่มวิดเจ็ต Magento บล็อก ตัวแปร & URLs;
• ค้นหา การเรียงลำดับ การปรับแต่ง และโหมดมุมมองอัจฉริยะ
• การปรับแต่งในเชิงลึก - วิดเจ็ต แกลเลอรี และตัวแปรสามารถนำไปใช้เป็นปลั๊กอินได้ ทั้งแบบเป็นกลุ่มและแยกกันสำหรับอินสแตนซ์อื่นๆ ทุกรายการ

Magento 2 Page Builder

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

โดยทั่วไป หน้าที่หลักของประเภทเนื้อหาประกอบด้วย:

• การสร้างสิ่งพิมพ์โดยการลากและวาง;
• ปรับการแสดงตัวอย่างในร้านค้า
• แบบฟอร์มและการตั้งค่าอินพุตของอาคาร

การกำหนดค่า Page Builder มีสองประเภทหลักที่ขึ้นอยู่กับความต้องการของผู้ใช้ปลายทาง:

• การขยายประเภทที่มีอยู่
• การสร้างสิ่งใหม่ๆ

ตัวแก้ไขถูกรวมเข้ากับ Magento Commerce พร้อมฟังก์ชันพื้นฐานและพร้อมให้ซื้อสำหรับเจ้าของ Magento Open Source ทุกคน

อ่านเพิ่มเติม: คู่มือฉบับเต็มเกี่ยวกับ Magento Migration: ย้ายร้านค้าอีคอมเมิร์ซของคุณไปยัง Magento จากทุกแพลตฟอร์ม

วิธีกำหนดค่า WYSIWYG Editor ใน Magento 2 [อัปเดต 2021]

คุณรู้อยู่แล้วว่า Magento 2 WYSIWYG Editor คืออะไรและเกี่ยวกับโซลูชันซอฟต์แวร์ WYSIWYG อันดับต้น ๆ และคุณอาจสงสัยว่าจะเพิ่ม WYSIWYG Editor ใน Magento 2 System ได้อย่างไร ดังนั้น ถึงเวลาเปิดเผยวิธีกำหนดค่าตัวแก้ไข WYSIWYG ใน Magento 2 อ่านต่อเพื่อรับทราบ 4 ขั้นตอนง่ายๆ

วิธีเปิด/ปิด WYSIWYG Editor

ด้วย Magento 2 WYSIWYG Editor คุณสามารถสร้างบล็อก CMS และเพจ คำอธิบายผลิตภัณฑ์ และหมวดหมู่ได้ การเพิ่มและแก้ไขข้อความ วิดเจ็ต ลิงก์ ตัวแปร และรูปภาพทำได้ง่ายโดยไม่ต้องใช้ HTML และดูผลการดำเนินการของคุณในแบ็กเอนด์ทันที

อย่างไรก็ตาม คุณควรจำไว้ว่าเอดิเตอร์จะเพิ่มช่องว่างพิเศษในโค้ดหรืออาจบันทึกในรูปแบบที่เข้ากันไม่ได้เมื่อมีการแก้ไขเพจหรือบล็อกสำเร็จรูป ซึ่งอาจทำให้เกิดปัญหามาร์กอัปและการออกแบบ

เพื่อหลีกเลี่ยงปัญหาที่อาจเกิดขึ้น จะเป็นการดีกว่าที่จะเปิด/ปิดใช้งานตัวแก้ไขเมื่อมีการเปลี่ยนแปลงโค้ด HTML ซึ่งต้องมีลำดับของการกระทำดังต่อไปนี้

1. ไปที่แผงการดูแลระบบ->ร้านค้า->การกำหนดค่า;
   
2. คลิกที่ General->Content Management เพื่อดูตัวเลือกเปิด/ปิด
   
3. Wysiwyg ถูกเปิดใช้งานโดยค่าเริ่มต้น หากต้องการปิดใช้งาน ให้ยกเลิกการเลือกตัวเลือกใช้ค่าระบบ & เลือกตัวเลือกเมนูแบบเลื่อนลง
   • ปิดใช้งานโดยค่าเริ่มต้น - ตัวแก้ไข HTML จะมองเห็นได้เมื่อโหลดหน้า & คุณสามารถเปลี่ยนเป็นตัวแก้ไขแบบ WYSIWYG ได้
   • ปิดการใช้งานอย่างสมบูรณ์ - ความสามารถในการแก้ไขจะถูกปิดการใช้งานอย่างสมบูรณ์
   
   
4. บันทึกการเปลี่ยนแปลงทั้งหมด หากคุณพบปัญหาเกี่ยวกับตัวแก้ไข Magento 2 WYSIWYG ทำงานไม่ถูกต้อง คุณควรตรวจสอบข้อกำหนดหลักทั้งหมด & ล้างแคชด้วยวิธีต่อไปนี้:
   • ไปที่ระบบ -> เครื่องมือ -> การจัดการแคช
     
   • ในรายการ คลิกรีเฟรช->เลือกทั้งหมด->ส่ง
     

สรุป

การเลือกตัวแก้ไขแบบ WYSIWYG เมื่อสร้างเว็บไซต์ควรเป็นไปตามเป้าหมายของบริษัท ความต้องการ ข้อกำหนดด้านประสบการณ์ผู้ใช้ งบประมาณ กลยุทธ์ทางการตลาด พื้นฐานทางเทคนิค และด้านอื่นๆ ด้วยเหตุนี้ จึงไม่มีทางเลือกสากลที่ดีที่สุดเพียงตัวเลือกเดียว อย่างไรก็ตาม การใช้ Magento 2 เป็นทางเลือกที่ดีที่สุดของบริษัทที่มีความก้าวหน้า

บางคนอาจมองว่าการกำหนดราคาโซลูชันไม่สมเหตุสมผล แต่โปรดวางใจว่าทุกเพนนีที่คุณใช้ไปกับมันจะจ่ายออกไปในระยะยาว ความท้าทายส่วนใหญ่ที่เกี่ยวข้องกับการทำงานกับ Magento 2 สามารถจัดการได้สำเร็จหากคุณมีทีมนักพัฒนาที่เชี่ยวชาญและมีคุณสมบัติพร้อม BA ที่เชี่ยวชาญด้านอีคอมเมิร์ซอยู่เคียงข้างคุณ

หากคุณยังคงมองหาพันธมิตรทางธุรกิจที่เหมาะสมเพื่อช่วยคุณแก้ปัญหาและเอาชนะความท้าทายในเรื่องนี้ - ติดต่อผู้เชี่ยวชาญของ Dinarys ทันที เรามีความเชี่ยวชาญเชิงลึกในด้านอีคอมเมิร์ซ และสามารถชี้แจงความแตกต่าง รวมทั้งช่วยให้คุณดำเนินการและเปิดตัวโครงการของคุณได้อย่างถูกต้องและมีประสิทธิภาพมากที่สุด