วิธีเพิ่มสไตล์ให้กับ TinyMCE & Markdown Content

นักเขียนหลายคนชอบ ทำงานใน Markdown เพราะมันเป็นภาษาที่ง่ายกว่าและมีอุปสรรคน้อยกว่าที่จะปีนขึ้นไป ได้รับมันไกลจากที่สมบูรณ์แบบ แต่มันมี มุมมองที่สะอาดขึ้นสำหรับข้อความของคุณ ด้วยความสะดวก ส่งออกเป็น HTML.

น่าเสียดายที่รูปแบบการเริ่มต้นมักจะค่อนข้างน่าเบื่อ แต่ด้วยความที่ ไลบรารี wysiwyg.css, คุณสามารถ มีเอกสารที่มีชีวิตชีวา ในเวลาไม่นาน.

ไลบรารี CSS ฟรีนี้แปลงเนื้อหา TinyMCE หรือ Markdown พื้นฐานทั้งหมดของคุณให้เป็น รูปแบบบล็อก HTML ที่อ่านง่าย.

คุณไม่จำเป็นต้องรู้ HTML / CSS ที่ซับซ้อนใด ๆ ในการใช้ปลั๊กอินนี้ ง่ายดาย ห่อเนื้อหาที่สร้างขึ้น เป็น div กับชั้นเรียน .WYSIWYG, และคุณพร้อมแล้ว.

ปัญหาที่แท้จริงคือการสร้างแอพที่จะทำให้กระบวนการนี้เป็นแบบอัตโนมัติหรือเพิ่มไลบรารีนี้ลงในแบ็กเอนด์สำหรับแผงผู้ดูแลระบบผู้ใช้.

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

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

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

การตั้งค่าไลบรารีทำได้ง่ายกว่าเช่นกัน เพียงแค่ ดาวน์โหลดสำเนาในเครื่อง หรือ ดึงมันโดยตรง การใช้ npm ติดตั้ง wysiwyg.css

จากตรงนั้นคุณแค่ รวมถึงไฟล์ CSS ในหัวเอกสารของคุณและปล่อยให้มันทำงาน มันจะกำหนดเป้าหมายเนื้อหาเท่านั้น ภายในภาชนะที่มีคลาส .WYSIWYG, ดังนั้นคลาสนี้ควรห่อสิ่งที่คุณต้องการ.

ห้องสมุดยังคงอยู่ อัพเดทกึ่งบ่อย, คุณสามารถ ค้นหาการอัปเดตล่าสุด ใน repit GitHub หลัก และหากคุณมีข้อเสนอแนะหรือความคิดสำหรับการปรับปรุงใหม่อย่าลังเลที่จะแบ่งปันกับผู้สร้าง Jeremy Thomas บนหน้า Twitter ของเขา @jgthms.