Ueditor Component เป็น Open Source Web Online Wysiwyg โปรแกรมแก้ไขข้อความที่ให้บริการโดย Baidu มันมีน้ำหนักเบาปรับแต่งได้และมุ่งเน้นไปที่ประสบการณ์ผู้ใช้ มันขึ้นอยู่กับโปรโตคอล MIT และมีฟังก์ชั่นที่ทรงพลังมาก เมื่อเร็ว ๆ นี้ในระหว่างกระบวนการใช้งานฉันพบว่ารูปภาพที่อัปโหลด (หรือแทรกรูปภาพอีโมจิที่มีอยู่) ไม่สามารถปรับขนาดได้ตามปกติ เลือกรูปภาพคลิกและลากฉลากขนาดเล็กที่ขอบของรูปภาพด้วยเมาส์และสามารถลดรูปภาพได้ แต่ไม่ขยาย ฉันได้ลองหลายวิธี แต่ไม่สามารถแก้ปัญหาได้ ฉันตรวจสอบซอร์สโค้ด JS และไม่พบข้อยกเว้น
ต่อมาฉันได้ค้นพบโดยบังเอิญว่า Bootstrap ถูกนำมาใช้ในหน้าและ Bootstrap ตั้งค่าสไตล์กล่องขนาดเป็นกล่องโดยค่าเริ่มต้น สำหรับเนื้อหาเฉพาะโปรดตรวจสอบบันทึกการเปิดตัว bootstrap: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/
สำหรับคำจำกัดความและการใช้งานสไตล์กล่องคุณสามารถดูได้ที่นี่: http://www.w3school.com.cn/cssref/pr_box-sizing.asp
CSS ที่มีอิทธิพลใน bootstrap:
*,*: ก่อนหน้า,*: หลังจาก {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; การปรับแต่งกล่อง: border-box;}เราเพียงแค่ต้องกำหนด CSS ใหม่บนหน้าเพื่อแทนที่สไตล์ข้างต้นใน bootstrap เช่น:
.edui-container *{-webkit-box-sizing: content-box; -moz-box-sizing: content-box; กล่องปรับแต่ง: content-box;}. edui-container *: ก่อนหน้า, .edui-container *: หลังจาก {-webkit-box-sizing*.EDUI-CONTAINER เป็นคลาส CSS ที่ใช้กับองค์ประกอบหลักขององค์ประกอบ UEDITOR
ด้านบนเป็นคำอธิบายแบบเต็มของวิธีการแก้ปัญหาของ Bootstrap 3 สไตล์การปรับขนาดกล่องที่แนะนำโดยบรรณาธิการ ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา!