Bootstrap 3의 상자 크기 조정 스타일로 인해 UEditor 컨트롤의 그림이 정상적으로 크기 조정되지 않습니다.

UEditor 구성 요소는 Baidu에서 제공하는 오픈 소스 웹 온라인 WYSIWYG 리치 텍스트 편집기 세트로, 가볍고 사용자 정의가 가능하며 MIT 프로토콜을 기반으로 하며 매우 강력한 기능을 가지고 있습니다. 최근 업로드된 사진(또는 기존 이모티콘 사진에 삽입된 사진)의 크기가 정상적으로 조정되지 않는 것을 발견했습니다. 사진을 선택하고 사진 가장자리에 있는 작은 라벨을 마우스로 클릭한 후 드래그하면 사진의 축소만 가능하지만 축소할 수는 없습니다. 크게 하는. 여러 가지 방법을 시도했지만 해결되지 않았습니다. js 소스 코드를 확인했는데도 이상한 점은 발견되지 않았습니다.

나중에 우연히 Bootstrap이 페이지에 소개되었다는 것을 알게 되었는데, Bootstrap은 기본적으로 box-sizing 스타일을 border-box로 통합했습니다. 특정 콘텐츠를 보려면 Bootstrap의 릴리스 로그를 확인하세요: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

박스 크기 스타일의 정의와 사용법은 여기를 참조하세요: http://www.w3school.com.cn/cssref/pr_box-sizing.asp

부트스트랩의 영향력 있는 CSS:

<span style="color: #800000;">*,
*:before,
*:after </span>{<span style="color: #ff0000;">
  -webkit-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
     -moz-box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;<span style="color: #ff0000;">
          box-sizing</span>:<span style="color: #0000ff;"> border-box</span>;
}

Bootstrap에서 위의 스타일을 재정의하려면 다음과 같이 페이지에서 CSS를 재정의하면 됩니다.

<span style="color: #800000;">  .edui-container *</span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    -moz-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;
  }<span style="color: #800000;">

  .edui-container *:before,
  .edui-container *:after </span>{<span style="color: #ff0000;">
    -webkit-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    -moz-box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;<span style="color: #ff0000;">
    box-sizing</span>:<span style="color: #0000ff;"> content-box</span>;
  }

* .edui-container는 UEditor 구성 요소를 참조하는 상위 요소에 사용되는 CSS 클래스입니다.