7 ที่ดีที่สุด WYSIWYG HTML Editor โอเพ่นซอร์ส

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

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

ยังอ่าน: 50+ โอเพ่นซอร์สแอพ Android เมื่อคุณต้องการละทิ้ง Google

ที่ดีที่สุด WYSIWYG HTML Editor โอเพ่นซอร์ส

1. เพลล์

Pell น่าจะเป็นโปรแกรมแก้ไข WYSIWYG ที่เล็กและง่ายที่สุดที่คุณเคยเจอ มีขนาด 1.38 กิโลไบต์อย่างแท้จริง!

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

ข้อดี:

WYSIWYG ที่เล็กและเบาที่สุด
ไม่มีการอ้างอิง
ปรับแต่งได้อย่างง่ายดาย

จุดด้อย:

ไม่มีการแก้ไข HTML ที่สวยงาม
รูปภาพผ่านลิงก์เท่านั้น

คำตัดสิน:
เมื่อพิจารณาถึงขนาดของมันแล้ว Pell จึงสร้างแพ็คเกจที่น่าสนใจ แต่บอกตามตรงว่าคุณสามารถรับไฟล์ HTML พื้นฐานที่ทำได้ด้วยตัวเลือกการแก้ไขที่ จำกัด เท่านั้น ดังนั้นหากคุณเป็นคนที่กำลังมองหาโปรแกรมแก้ไขแบบ WYSIWYG ที่รวดเร็วและมีน้ำหนักเบาซึ่งเป็นโอเพนซอร์สสำหรับงานพื้นฐานบางอย่างลองดูที่ Pell

รับ Pell

2. OpenWYSIWYG

OpenWYSIWYG เป็นโปรแกรมแก้ไข HTML แบบ Rich-text ข้ามเบราว์เซอร์ที่เข้ารหัสทั้งหมดใน JavaScript เพียงแค่คัดลอกและวางโค้ดไม่กี่บรรทัดคุณก็สามารถเปลี่ยนอะไรก็ได้ ลงในโปรแกรมแก้ไข WYSIWYG HTML ที่มีประสิทธิภาพของ OpenWYSIWYG UI และตัวเลือกการแก้ไขพร้อมเมนูแบบเลื่อนลงนั้นคล้ายกับโปรแกรมแก้ไขข้อความใด ๆ และคุณจะรู้สึกเหมือนอยู่บ้าน นอกเหนือจากตัวเลือกการจัดรูปแบบพื้นฐานทั้งหมดแล้ว OpenWYSIWYG ยังมีตัวเลือกสีที่ได้รับการปรับปรุงพร้อมสีเว็บ 216 สีให้เลือกและเครื่องมือจัดรูปแบบตารางที่มีประสิทธิภาพพร้อมทุกตัวเลือกที่คุณคิดได้ สิ่งที่ยอดเยี่ยมอีกอย่างเกี่ยวกับ OpenWYSIWYG ก็คือคุณยังสามารถใช้ตัวเลือกภาพทั้งหมดได้อีกด้วยดูโค้ด HTML ดิบ และทำการปรับเปลี่ยนโดยตรงในโค้ด มีประโยชน์เมื่อคุณต้องการเรียนรู้หรือฟื้นฟูทักษะการเขียนโค้ดของคุณ <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-2a8d34d0ca966deffc6441af9dbbe702-101381.jpg" alt="7 ที่ดีที่สุด WYSIWYG HTML Editor โอเพ่นซอร์ส"> ข้อดี: <ul> <li>สภาพแวดล้อมการแก้ไขที่มีประสิทธิภาพ</li> <li>UI ที่ใช้งานง่ายและใช้งานง่าย</li> <li>ตัวเลือกสีและตัวเลือกการแก้ไขตารางมากมาย</li> </ul> จุดด้อย: <ul> <li>ไม่ได้รับการปรับปรุงในสองสามปี</li> </ul> คำตัดสิน: เมื่อเขียนด้วย JavaScript โอเพนซอร์สตัวแก้ไข OpenWYSIWYG HTML ควรทำงานร่วมกับภาษาโปรแกรมเว็บอื่น ๆ หากคุณกำลังมองหาสิ่งที่มีประสิทธิภาพมากกว่า Pell เพื่อรวมไว้ในเว็บแอปพลิเคชันของคุณนี่เป็นตัวเลือกที่ยอดเยี่ยม รับ OpenWYSIWYG <h3>3. TinyMCE (ฉบับชุมชน)</h3> ตัวแก้ไข HTML WYSIWYG โอเพ่นซอร์สถัดไปในรายการของเราคือ TinyMCE นอกจากนี้ยังเขียนด้วย JavaScript อย่างสมบูรณ์และมี UI และประสบการณ์เช่นเดียวกับโปรแกรมประมวลผลคำส่วนใหญ่ ซึ่งทำให้ใช้งานง่ายมากขึ้น TinyMCE ไม่ฟรี แต่ Community Edition เป็นรุ่นฟรีและโอเพ่นซอร์ส มาพร้อมกับตัวเลือกการแก้ไขพื้นฐานทั้งหมดเช่นการจัดรูปแบบข้อความรายการตารางและตัวเลือกการแก้ไขรูปภาพ นักพัฒนายังคงกำหนดราคาของรุ่นพรีเมียมตามจำนวนผู้ใช้ คุณลักษณะพิเศษบางอย่างรวมถึงการสนับสนุน Google Drive และ Microsoft Azure ส่วนขยายตัวตรวจสอบการสะกดและลิงก์และการสนับสนุนทางเทคนิค <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-35ef757e6374c689f5158bf25ea8b2c6-101381.jpg" alt="หากคุณเคยมีประสบการณ์ด้านการเขียนโปรแกรมมาก่อนและไม่มีเวลาเรียนรู้คุณสามารถหลีกเลี่ยงได้โดยใช้โอเพนซอร์สแก้ไข WYSIWYG HTML อย่างไรก็ตามการค้นหา WYSIWYG HTML Editor ที่ดีนั้นไม่ใช่เรื่องง่ายโดยเฉพาะอย่างยิ่งหากคุณต้องการให้เป็นโอเพนซอร์สฟรี"> ข้อดี: <ul> <li>การสนับสนุนส่วนขยาย</li> <li>การจัดการไฟล์</li> <li>การสนับสนุนทางเทคนิค</li> <li>ตัวแก้ไขโค้ดสไตล์ IDE สำหรับ HTML</li> </ul> จุดด้อย: <ul> <li>แพง</li> <li>ไม่ใช่โอเพ่นซอร์สอย่างสมบูรณ์</li> </ul> คำตัดสิน: TinyMCE พร้อมตัวเลือกการรวมที่ง่าย UI ที่ใช้งานง่ายและคุณสมบัติมากมายเป็นแพ็คเกจที่สมบูรณ์ หากคุณต้องการเพียงแค่โอเพนซอร์สตัวแก้ไข WYSIWYG HTML ที่มีฟีเจอร์มากที่สุดและโอเคกับการใช้จ่ายเงิน TinyMCE คือหนทางที่จะไป นอกจากนี้พวกเขายังเสนอรุ่น Pro รุ่นทดลองใช้ฟรีหนึ่งเดือนซึ่งคุณสามารถตรวจสอบได้ตลอดเวลา รับ TinyMCE Demo <h3>4. จ๊อด</h3> Jodit เป็นโปรแกรมแก้ไขโอเพ่นซอร์ส WYSIWYG HTML Editor ที่รวดเร็วและมีน้ำหนักเบาซึ่งคุณสามารถฝังลงในโค้ดของคุณและเริ่มแก้ไขเพจของคุณได้ มีขนาดค่อนข้างเบาที่ขนาดประมาณ 100 KB และได้รับการเขียนอย่างสมบูรณ์ใน TypeScript นั่นคือเหตุผลที่คุณไม่จำเป็นต้องมีการอ้างอิงหรือไลบรารีใด ๆ เพื่อเรียกใช้ มันมาพร้อมกับอินเทอร์เฟซแบบลาก n-drop สำหรับรูปภาพด้วย คุณยังสามารถแนบวิดีโอ YouTube หรือ Vimeo ผ่านลิงก์หรือฝังได้ สิ่งที่ดีที่สุดที่ฉันชอบเกี่ยวกับ Jodit คือมันมาพร้อมกับไฟล์ บรรณาธิการ ACE ออกจากกล่องและด้วยปุ่มเดียวคุณสามารถสลับระหว่างรหัสจริงและโหมดแสดงตัวอย่างได้ <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d9f6924fe440a4261e0839c0c4b1c532-101381.jpg" alt="html, wysiwyg, การแก้ไข, ตัวเลือก, openurce, editopenurce, pros, code, text, cons, support, editors, based, verdict, bootstrap"> ข้อดี: <ul> <li>น้ำหนักเบาไม่มีห้องสมุด</li> <li>ลาก n วาง</li> <li>โปรแกรมแก้ไข ACE นอกกรอบ</li> <li>การสนับสนุนทางเทคนิค (จ่าย)</li> </ul> คำตัดสิน: Jodit นำเสนอสิ่งที่ดีที่สุดจากทั้งสองโลก - โปรแกรมแก้ไข WYSIWYG แบบวิชวลที่ใช้งานง่ายและการแก้ไขโค้ดดิบ หากคุณเป็นคนที่มีความรู้เกี่ยวกับ HTML เป็นอย่างน้อย Jodit อาจเป็นตัวเลือกที่ดีที่สุดสำหรับคุณ รับ Jodit Playground <h3>5. Summernote</h3> Summernote เป็นโปรแกรมแก้ไขแบบ WYSIWYG แบบโอเพ่นซอร์สที่สร้างขึ้นบน jQuery และใช้ Bootstrap เนื่องจากรองรับ Bootstrap คุณจึงสามารถใช้สไตล์และธีมที่รองรับทั้งหมดในโปรแกรมแก้ไขของคุณจาก Bootswatch โอเพนซอร์สตัวแก้ไข WYSIWYG HTML นั้นมี UI ที่สะอาดและน้อยที่สุดและคุณยังสามารถแก้ไขหรือเพิ่มตัวเลือกการจัดรูปแบบได้ตามความต้องการของคุณ ด้วยโหมด Air-mode ของ Summernote คุณสามารถซ่อนแถบเครื่องมือทั้งหมดและแก้ไขเอกสารของคุณได้ทันที สะดวก. นอกจากนี้ยังสามารถแปลงรูปภาพทั้งหมดเป็น base64 โดยอัตโนมัติดังนั้นคุณไม่ต้องจัดการรูปภาพเลย สำหรับฉันส่วนที่ดีที่สุดเกี่ยวกับ Summernote คือทีมนักพัฒนาที่ทำงานหนักที่อยู่เบื้องหลังซึ่งคอยรับฟังชุมชนและเพิ่มคุณสมบัติใหม่ ๆ อยู่เสมอ ตัวอย่างรวมถึงการสนับสนุนปลั๊กอินและ Summernote เวอร์ชันไลต์หรือวานิลลาซึ่งไม่ต้องใช้ Bootstrap <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-d48b6067378fbbbed4746fb15a5e64e8-101381.jpg" alt="7 ที่ดีที่สุด WYSIWYG HTML Editor โอเพ่นซอร์ส"> ข้อดี: <ul> <li>เส้นโค้งการเรียนรู้ขั้นต่ำ</li> <li>โหมดอากาศสำหรับการแก้ไขในทันที</li> <li>รองรับ Bootstrap 3.x.x ถึง 4.x.x</li> <li>ดูและแก้ไขใน HTML</li> </ul> จุดด้อย: <ul> <li>ต้องใช้ Bootstrap</li> </ul> คำตัดสิน: Summernote น่าจะเป็นโปรแกรมแก้ไข HTML แบบ WYSIWYG แบบโอเพ่นซอร์สที่มีคุณลักษณะหลากหลาย แต่ฟรีและมีอยู่ในตลาดและมีการปรับปรุงอย่างต่อเนื่อง หากคุณกำลังทำงานกับ Bootstrap ดังนั้น Summernote ก็ไม่ใช่เกมง่ายๆ แต่แม้ว่าคุณจะไม่ได้เป็นเช่นนั้นก็ตาม Summernote ก็สมควรที่จะได้รับการตรวจสอบ รับ Summernote Demo <h3>6. โฟรอาลา</h3> Froala เป็นโอเพนซอร์สแก้ไข WYSIWYG HTML ที่สวยงามซึ่งเขียนด้วย JavaScript เป็นหนึ่งในเครื่องมือที่ได้รับความนิยมมากขึ้นในรายการนี้และความนิยมของนักพัฒนาสามารถนำมาประกอบกับการผสานรวมที่ง่ายดายและการออกแบบที่สะอาดตา Froala เป็นเครื่องมือแก้ไขที่ทรงพลังมากในตัวมันเองและปลั๊กอินมากมายที่มีอยู่มากมายก็เพิ่มขึ้นเท่าเดิม บางตัวมีโปรแกรมแก้ไขรูปภาพขั้นสูงอีโมติคอนเครื่องตรวจตัวสะกดและยังสร้างปลั๊กอินของคุณเองได้ง่ายอีกด้วย เครื่องมือทั้งหมดยังสามารถเข้าถึงได้ด้วยโปรแกรมแก้ไขแบบอินไลน์ซึ่งสะดวกมาก เช่นเดียวกับ TinyMCE Froala มีให้เลือกหลายรสชาติ แต่แม้กระทั่งเวอร์ชันฟรีก็มีหมัดมากมาย ข้อแตกต่างเพียงอย่างเดียวคือคุณจะไม่ได้รับซอร์สโค้ดและการสนับสนุนทางเทคนิคทั้งหมด <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-5a89ec944a7b7318dad29d4cbe38303c-101381.jpg" alt="7 ที่ดีที่สุด WYSIWYG HTML Editor โอเพ่นซอร์ส"> ข้อดี: <ul> <li>ตัวแก้ไขที่มีประสิทธิภาพน้ำหนักเบา</li> <li>การแก้ไขแบบอินไลน์</li> <li>ปลั๊กอินเหลือเฟือ</li> </ul> จุดด้อย: <ul> <li>ไม่เหมาะสำหรับแอป / เว็บไซต์ไฮบริดบนอุปกรณ์เคลื่อนที่</li> </ul> คำตัดสิน: Froala นั้นรวดเร็วและมีน้ำหนักเบาพร้อม UI ที่สวยงาม แต่ก็ยังสามารถนำคุณสมบัติทั้งหมดที่อาจมองหามาใช้ในโปรแกรมแก้ไข HTML แบบ WYSIWYG หากคุณไม่เป็นไรหากไม่มีซอร์สโค้ดและการสนับสนุนเวอร์ชันฟรีจะให้บริการคุณได้ดีไม่เช่นนั้นคุณก็รู้ว่าต้องทำอย่างไร รับ Froala <h3>7. CKEditor</h3> CKEditor ได้รับความนิยมอย่างมากจากผู้ใช้เนื่องจากเป็นโอเพนซอร์สแก้ไข WYSIWYG HTML ที่ออกแบบมาอย่างสวยงาม มาพร้อมกับการทดสอบมากกว่า 21k เพื่อช่วยให้คุณเรียนรู้ HTML ในรูปแบบที่เป็นมิตร เอกสารโดยละเอียดจะช่วยให้คุณฝึกฝนทักษะของคุณได้มากขึ้น ชื่อที่ยิ่งใหญ่ที่สุดในอุตสาหกรรมเทคโนโลยีบางส่วนไว้วางใจ โปรดทราบว่าคุณจะต้องเก็บประกาศลิขสิทธิ์ในแต่ละไฟล์ไว้เหมือนเดิมและไม่ลบไฟล์ LICENSE.md ที่อยู่ในโฟลเดอร์การติดตั้ง CKEditor นั่นไม่ใช่ข้อเสียเปรียบโดยเฉพาะอย่างยิ่งเมื่อคุณได้รับผลตอบแทนมากมาย มีการรองรับปลั๊กอิน @mention อิโมจิเบราว์เซอร์เดิมและแม้แต่การเติมข้อความอัตโนมัติซึ่งช่วยประหยัดเวลาได้มาก <img src="//geekmarkt.com/img/101381/7-best-wysiwyg-html-editor-open-source-f7cf4bbbed846085854eb05d6236462e-101381.png" alt="หากคุณเคยมีประสบการณ์ด้านการเขียนโปรแกรมมาก่อนและไม่มีเวลาเรียนรู้คุณสามารถหลีกเลี่ยงได้โดยใช้โอเพนซอร์สแก้ไข WYSIWYG HTML อย่างไรก็ตามการค้นหา WYSIWYG HTML Editor ที่ดีนั้นไม่ใช่เรื่องง่ายโดยเฉพาะอย่างยิ่งหากคุณต้องการให้เป็นโอเพนซอร์สฟรี"> ข้อดี: <ul> <li>เอกสารโดยละเอียดการทดสอบคำถาม</li> <li>ทำงานร่วมกันและ @mention</li> <li>เติมข้อความอัตโนมัติ</li> </ul> จุดด้อย: <ul> <li>เก็บไฟล์ใบอนุญาต</li> </ul> รับ CKEditor กล่าวถึงกิตติมศักดิ์: 1. MediumEditor เป็นโคลนโอเพ่นซอร์สของตัวแก้ไข WYSIWYG แบบอินไลน์สำหรับ Medium.com มันตายง่ายน้ำหนักเบาและมาโดยไม่ต้องพึ่งพาใด ๆ แม้ว่าจะไม่ได้มีประสิทธิภาพมากนัก แต่ก็สามารถทำหน้าที่เป็นเครื่องมือแก้ไขแบบอินไลน์ที่ยอดเยี่ยมสำหรับข้อความหรือเอกสารที่เกี่ยวข้องกับข้อความ 2. แพ็กเกจตัวอย่าง HTML ของ Atom ช่วยให้คุณสามารถเพิ่มบานหน้าต่างแสดงตัวอย่างซึ่งคุณสามารถดูตัวอย่างโค้ด HTML แบบสดได้ซึ่งจะมีประโยชน์มากสำหรับนักพัฒนา แม้ว่าจะไม่เหมาะสำหรับผู้เริ่มต้นอย่างแน่นอน แต่ก็เป็นแพ็คเกจที่ยอดเยี่ยมในการเพิ่มลงในเวิร์กโฟลว์ที่มีอยู่หากคุณเขียนโปรแกรมด้วย HTML อยู่แล้ว <h3>ที่ดีที่สุด WYSIWYG HTML Editor โอเพ่นซอร์ส</h3> ในขณะที่ HTML ยังคงเป็นวิธีที่มีประสิทธิภาพมากกว่าในการสร้างเว็บไซต์และสิ่งที่ซับซ้อนกว่านั้นก็เป็นไปได้ แต่บรรณาธิการแบบ WYSIWYG ได้รักษาความปลอดภัยให้กับสถานที่ของตนเอง การเรียนรู้การเขียนโค้ดต้องใช้เวลาและแรงกายในการลงทุนเป็นจำนวนมากและอาจไม่เหมาะสมสำหรับทุกคน หากคุณมีประสบการณ์ด้านการเขียนโปรแกรมมาก่อนและไม่มีเวลาเรียนรู้คุณสามารถหลีกเลี่ยงได้โดยใช้โอเพนซอร์สแก้ไข WYSIWYG HTML ยังอ่าน: <a href="/7-best-open-source-browser-for-android-2018-100540" target="_blank">7 เบราว์เซอร์โอเพ่นซอร์สที่ดีที่สุดสำหรับ Android (2018)</a>