Bootstrap 3의 박스-sizing 스타일로 인해 UEditor 컨트롤의 이미지가 정상적으로 줄이지 않는 해결책

UEditor 컴포넌트는 Baidu에서 제공하는 오픈 소스 웹 온라인所见即所得 Rich Text Editor입니다. 가벼우며, 맞춤형, 사용자 경험에 중점을 둔等特点을 가지고 있으며, MIT 계약에 따라 강력한 기능을 제공합니다. 최근 사용 중에 올리거나 이미 추가된 이모지 이미지가 정상적으로 확대되지 않는 문제를 발견했습니다. 이미지를 선택하고 마우스를 클릭하여 이미지의 모서리 태그를 끌어당겨도 이미지는 축소되지만 확대되지 않습니다. 여러 가지 방법을 시도했지만 해결되지 않았으며, JS 소스 코드를 확인한 결과도 이상이 없었습니다.

　　이후에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에 영향을 미치는 CSS:

*,
*: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는 UEditor 컴포넌트를 사용하는 부모 요소에 사용되는 CSS class입니다.

위에 설명한 것은 편집자가 모두에게 소개한 Bootstrap입니다. 3의 박스-sizing 스타일이 UEditor 컨트롤의 이미지가 정상적으로 줄이지 않도록 하는 해결책 전체 설명을 제공하겠습니다. 모두에게 도움이 되길 바랍니다. 모두가 어떤 질문이나 의문이 있으면 댓글을 남겨주세요. 편집자는 즉시 답변을 드리겠습니다!