MediumEditor - แถบเครื่องมือแก้ไขข้อความแบบอินไลน์สำหรับเว็บ

ทุกคนรู้ Medium.com และแพลตฟอร์มบล็อกที่ได้รับความนิยมอย่างสูง พวกเขา นิยามใหม่ของแนวคิดมากมายในโลกการออกแบบ และคุณสามารถพบบทเรียนมากมายที่สอนวิธีโคลนการออกแบบของพวกเขา.

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

หมายเหตุโครงการนี้ไม่มีส่วนเกี่ยวข้องกับ Medium แต่อย่างใด ไม่ใช่ปลั๊กอินอย่างเป็นทางการ.

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

บรรณาธิการ ทำงานในเบราว์เซอร์หลัก ๆ ทั้งหมด, รวมถึง Microsoft Edge และ IE เวอร์ชันปัจจุบัน มันยังรองรับ Internet Explorer เวอร์ชันเก่าย้อนหลังไปถึง IE7 บ้า!

การติดตั้งนั้นง่ายมาก ดึงไฟล์ทั้งหมดโดยตรง ผ่าน npm หรือ Bower หรือแม้กระทั่ง ใช้ CDN ออนไลน์ฟรี เช่น JSDelivr.

แล้วคุณจะdd ทั้งไฟล์ CSS และ JavaScript ที่ส่วนหัวของเว็บไซต์ของคุณ ง่าย peasy.

จากนั้นคุณ เรียกบรรณาธิการ ด้วยรหัสบรรทัดเดียว:

 var editor = MediumEditor ใหม่ ('. แก้ไขได้'); 

คุณสามารถ ผ่านรายการองค์ประกอบของหน้า ที่ควรทำงานกับโปรแกรมแก้ไขเท่านั้นหรือคุณสามารถ ปล่อยให้มันวิ่งข้ามทั้งหน้า.

น่าจะเป็นการใช้งานปลั๊กอินนี้ได้จริงที่สุด สร้างตัวแก้ไข WYSIWYG บางประเภท สำหรับเว็บแอป.

มัน ไม่ได้จัดการกับการส่งผ่านข้อมูลไปมา ระหว่างเซิร์ฟเวอร์กับลูกค้าดังนั้นคุณจะต้องสร้างตรรกะนั้นเอง อย่างไรก็ตามปลั๊กอินนี้ยังง่ายกว่าเริ่มต้นตั้งแต่เริ่มต้น.

หากคุณเลื่อนไปที่ด้านล่างสุดของหน้าตัวอย่าง MediumEditor คุณจะพบ รายการส่วนขยาย คุณสามารถทดสอบได้เช่นกัน เหล่านี้ ได้แก่ การแก้ไข markdown แบบเต็ม, พร้อมด้วย ปุ่มแบบกลาง และ คุณสมบัติการเชื่อมต่ออื่น ๆ.

ปลั๊กอินนี้เหมาะอย่างยิ่งสำหรับแฟน ๆ ของสื่อที่ต้องการ ทำซ้ำ UX ของพวกเขา ในโครงการอื่น.