حل مشكلة عدم التوسع الصحيح للصور في وحدة التحكم UEditor بسبب نمط box-sizing في Bootstrap 3

مكون UEditor هو مجموعة من الأدوات التي يقدمها بaidu كنظام مفتوح المصدر للتحرير التفاعلي للنصوص على الويب، يتميز بالوزن الخفيف، القابلية للتخصيص، والاهتمام بالتجربة المستخدمة، ويتم توفيره تحت إتفاقية MIT، ويتميز بمجموعة واسعة من الميزات القوية. في الآونة الأخيرة، اكتشفت أثناء الاستخدام أن الصور التي يتم تحميلها (أو إدراج مجموعة من الصور المتحركة) لا يمكن تقليلها أو تكبيرها بشكل صحيح، عند تحديد الصورة باستخدام الفأرة والنقر عليها ثم سحب الرمز الصغير على حافة الصورة، يمكن فقط تقليل الصورة دون تكبيرها. لقد جربت العديد من الطرق للإصلاح، حتى أنني قمت بفحص ملفات JavaScript المصدر، ولم أجد أي مشاكل غريبة.

　　لاحقاً اكتشفت بشكل غير مقصود أن Bootstrap تم إدخاله على الصفحة، ويقوم Bootstrap بشكل افتراضي بتعيين نمط box-sizing إلى border-box. يمكن مشاهدة المحتويات بشكل تفصيلي في سجلات إصدار Bootstrap:http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

　　للحصول على تعريف الاستخدام لنمط box-sizing يمكن الرجوع إلى هنا:http://www.w3school.com.cn/cssref/pr_box-sizing.asp

　　السي اس سي التي تؤثر في Bootstrap:

,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

　　نحن بحاجة إلى إعادة تعريف css على الصفحة لغرض تغطية النمط المذكور أعلاه في Bootstrap، مثلًا:

.edui-container *{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.edui-container *:before,
.edui-container *:after {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}

　　* .edui-container هو عنصر الوالد الذي يستخدم css class لتضمين عنصر UEditor.

التفاصيل الكاملة لحل مشكلة عدم تحديد حجم الصور بشكل صحيح في وحدة التحكم UEditor بسبب نمط box-sizing في Bootstrap 3، أتمنى أن تكون مفيدة لكم، إذا كان لديكم أي استفسارات، فلا تترددوا في ترك تعليق، وسأقوم بالرد على رسائلكم في أقرب وقت ممكن،