เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ · HTML บรรณาธิการ WYSIWYG
วิธีที่ตัวแก้ไข WYSIWYG เปลี่ยนการจัดรูปแบบเป็น HTML: อธิบายเนื้อหาได้
· มันทำงานอย่างไร
html เป็นที่พอใจ นักพัฒนาเวิร์กโฟลว์
อธิบายแอตทริบิวต์ contenteditable ที่ทำให้องค์ประกอบต่างๆ สามารถแก้ไขได้ วิธีที่เบราว์เซอร์เปลี่ยนรูปแบบ DOM ขณะที่คุณพิมพ์และจัดรูปแบบ และวิธีที่ DOM กลายเป็น HTML ที่คุณคัดลอกออกมา
คุณกดตัวหนา <strong> มาจากไหน — เปิดขึ้นโดยมีช่องว่างระหว่างการคลิกปุ่มและดูมาร์กอัป
ปุ่มแถบเครื่องมือที่มีข้อความเป็นตัวหนาให้ความรู้สึกเหมือนพู่กัน แต่เบราว์เซอร์จะต้องแสดงผลลัพธ์ในแผนผังเอกสาร วลีที่เลือกสามารถกลายเป็นองค์ประกอบ <b> หรือ <strong> ขึ้นอยู่กับคำสั่งการแก้ไขและกลไก งานของนักพัฒนาซอฟต์แวร์คือเปลี่ยนการกลายพันธุ์เฉพาะเบราว์เซอร์ให้เป็น HTML หน้าอื่นที่สามารถอ่านได้โดยไม่ต้องยอมรับทุกแท็กหรือแอตทริบิวต์ที่เป็นอันตราย สิ่งที่คุณเห็นบนหน้าจอคือ DOM ที่แก้ไขได้ ไม่ใช่ไฟล์ประมวลผลคำที่มีเลเยอร์การจัดรูปแบบอิสระ
contenteditable: คุณลักษณะที่ทำให้เพจสามารถแก้ไขได้ — อธิบายโฮสต์การแก้ไข ตำแหน่งเครื่องหมายรูปหมวก และวิธีที่เบราว์เซอร์เป็นเจ้าของพฤติกรรมการแก้ไข
contenteditable="true" ทำให้องค์ประกอบเป็นโฮสต์สำหรับการแก้ไข เบราว์เซอร์จัดการการเคลื่อนไหวเครื่องหมายรูปหมวก การเลือก การแทรก และการลบภายใน โดยมีแผนผัง DOM อยู่ข้างใต้ พื้นผิวการแก้ไขของ ToolAcre ใช้คุณลักษณะของเบราว์เซอร์นี้และเปิดเผยทั้งโหมดภาพและโหมดแหล่งที่มา เนื้อหายังคงอยู่ในเพจแทนที่จะถูกส่งไปยังเซิร์ฟเวอร์ Rich-Text เหตุการณ์การวางได้รับความสนใจแยกกัน เนื่องจากการวาง HTML สามารถรวมองค์ประกอบและแอตทริบิวต์ที่ต้องไม่ป้อนเอกสารที่เชื่อถือได้โดยไม่เลือก
การกดแป้นพิมพ์แต่ละครั้งมีการกลายพันธุ์แบบ DOM — อธิบายโหนดข้อความที่กำลังเติบโต องค์ประกอบต่างๆ ที่ถูกห่อและแยก และสาเหตุที่ต้นไม้เปลี่ยนแม้ว่าข้อความจะดูไม่เปลี่ยนแปลงก็ตาม
การพิมพ์จะสร้างหรือขยายโหนดข้อความ การกด Enter อาจแยกบล็อก การทำการเลือกด้วยตัวหนาจะล้อมรอบช่วง ไม่รับประกันว่า DOM ที่แม่นยำหลังจากการคลิกสองครั้งจะตรงกับสตริง <strong> ที่นักพัฒนาจินตนาการไว้: เบราว์เซอร์เลือกองค์ประกอบและการซ้อนที่แตกต่างกัน ToolAcre ปัจจุบันใช้ document.execCommand สำหรับการจัดรูปแบบ API นั้นเลิกใช้แล้ว แต่ไม่มีการแทนที่แบบดรอปอินที่ใช้งานอย่างสม่ำเสมอสำหรับการดำเนินการแก้ไขทุกครั้งที่นี่ ดังนั้นตัวแก้ไขจึงถือว่าเอาต์พุตของมันคืออินพุตที่ไม่น่าเชื่อถือเพื่อให้ถูกทำให้เป็นมาตรฐานแทนที่จะเป็นมาร์กอัปตามรูปแบบบัญญัติ
จากสตริงสด DOM ถึง HTML — อธิบายการทำให้เป็นอนุกรมของแผนผังที่แก้ไขเป็นมาร์กอัปที่คุณสามารถคัดลอกได้
หากต้องการคัดลอก HTML ตัวแก้ไขจะอ่าน HTML ภายในของพื้นผิวการแก้ไข และส่งสตริงผลลัพธ์ผ่านองค์ประกอบ/attribute รายการที่อนุญาต แท็กเช่น b จะถูกทำให้เป็นมาตรฐานไปจนถึง semantic strong; ลิงก์ที่อนุญาตจะถูกตรวจสอบสำหรับโครงร่าง URL ที่ยอมรับได้ ในขณะที่ตัวจัดการเหตุการณ์และแอตทริบิวต์ที่ไม่เกี่ยวข้องจะถูกลบออก โหมดแหล่งที่มายังส่งข้อความผ่านตัวกรองเดียวกันก่อนที่จะนำกลับเข้าสู่พื้นผิวภาพ นี่คือเส้นทางการล้างข้อมูลเฉพาะตัวแก้ไข ไม่ใช่เครื่องมือฆ่าเชื้อ HTML ฝั่งเซิร์ฟเวอร์สำหรับวัตถุประสงค์ทั่วไปสำหรับเนื้อหาที่ไม่เป็นมิตรจากผู้ใช้ที่กำหนดเอง
ตัวอย่างการทำงาน: บันทึกสองย่อหน้าที่มีวลีตัวหนา - ตามหลัง DOM โดยการพิมพ์ การเลือก และตัวหนา จากนั้นจะแสดงมาร์กอัปผลลัพธ์
พิมพ์สองย่อหน้า — “Project update” และ “Draft ready”—จากนั้นเลือก “Draft” ในย่อหน้าที่สองแล้วกด Bold เบราว์เซอร์อาจแทรก <b>Draft</b> ลงใน DOM แบบสด การสลับไปยังโหมดแหล่งที่มาจะส่งผ่านโปรแกรมฆ่าเชื้อของ ToolAcre ซึ่งสามารถปล่อย <strong>Draft</strong> ภายในย่อหน้าหลังจากการทำให้เป็นมาตรฐาน ลองใช้เพย์โหลด <img onerror="..."> ที่วางในเอกสารแบบใช้แล้วทิ้ง: รายการเอาต์พุตที่อนุญาตไม่รวมรูปภาพหรือแอตทริบิวต์ตัวจัดการเหตุการณ์ ตัวอย่างนี้แสดงให้เห็นว่าเหตุใดคุณจึงตรวจสอบมาร์กอัปผลลัพธ์ แทนที่จะคิดว่าการคลิกมีการแสดง HTML แบบสากลเพียงรายการเดียว
เหตุใดการกระทำเดียวกันจึงให้มาร์กอัปที่แตกต่างกันในเบราว์เซอร์ที่แตกต่างกัน — ครอบคลุมพฤติกรรมการแก้ไขเฉพาะเบราว์เซอร์ และเหตุใดผู้แก้ไขจึงทำให้เอาต์พุตเป็นมาตรฐาน
เบราว์เซอร์ที่แตกต่างกันใช้คำสั่งแก้ไข การขึ้นบรรทัดใหม่ และขอบเขตการเลือกต่างกัน แม้แต่ย่อหน้าที่มองเห็นได้เหมือนกันก็สามารถทำให้เป็นอนุกรมด้วยช่วงที่ซ้อนกันหรือองค์ประกอบบล็อกที่แตกต่างกัน ขั้นตอนการทำให้เป็นมาตรฐานจะลดความแตกต่างบางอย่าง แต่ไม่ทำให้ WYSIWYG กลายเป็นซีเรียลไลเซอร์ที่รับประกันมาตรฐาน ToolAcre แสดงแหล่งที่มาควบคู่ไปกับผลลัพธ์ภาพ ดังนั้นคุณจึงสามารถแก้ไขการซ้อนแบบคี่ได้ การดูตัวอย่างจะทำงานใน iframe โดยมีแอตทริบิวต์แซนด์บ็อกซ์ที่ไม่อนุญาตให้เรียกใช้สคริปต์ ซึ่งจำกัดผลกระทบของส่วนย่อยที่ไม่ปลอดภัยที่ไปถึงการแสดงตัวอย่างนั้น
สิ่งนี้ไม่ครอบคลุมถึง — การแก้ไขร่วมกัน การเลิกทำสแต็ก และเฟรมเวิร์กตัวแก้ไขแบบเต็มอยู่นอกขอบเขต
หน้านี้ไม่ได้รับประกันว่าจะมีการแก้ไขร่วมกัน ประวัติการเลิกทำที่สมบูรณ์ โปรแกรมรับส่งเมลที่ได้รับการปรับปรุง หรือเฟรมเวิร์กตัวแก้ไขเต็มรูปแบบ Contenteditable ไม่สามารถตัดสินใจได้ด้วยตัวเองว่ามาร์กอัปใดที่ CMS บุคคลที่สามยอมรับ และรายการที่อนุญาตแบบสตริงไม่สามารถทดแทน HTML5-parser sanitizer ฝั่งเซิร์ฟเวอร์ได้ ซึ่งผู้ใช้ที่ไม่น่าเชื่อถือสามารถส่งเนื้อหาได้ การแสดงตัวอย่างแบบแซนด์บ็อกซ์เป็นการป้องกันที่แยกจากการทำความสะอาดเอาต์พุต ไม่ทำให้ JavaScript หรือ URL ที่เป็นอันตรายโดยพลการปลอดภัยในทุกปลายทาง
Takeaway: บรรณาธิการคือ DOM คุณสามารถดู — สรุปกลไกและวิธีการ ToolAcreของ HTML WYSIWYG เครื่องมือแก้ไขจะเปิดเผยมาร์กอัปที่การจัดรูปแบบของคุณสร้างขึ้นโดยไม่ต้องออกจากเบราว์เซอร์
โปรแกรมแก้ไขคือ DOM ที่คุณสามารถดูและตรวจสอบได้ โปรแกรมแก้ไข HTML WYSIWYG ของ ToolAcre ช่วยให้คุณสามารถเปรียบเทียบการดำเนินการจัดรูปแบบภาพกับ HTML ที่กรองแล้วได้โดยตรง ซึ่งสร้างขึ้นภายในเบราว์เซอร์ของคุณ พิมพ์และเขียนบันทึกแบบใช้แล้วทิ้งด้วยตัวหนา สลับไปที่โหมดต้นทางและเก็บเฉพาะองค์ประกอบที่ปลายทางของคุณรองรับจริงๆ