Der Box-Sizing-Stil von Bootstrap 3 führt dazu, dass das Bild des UEditor-Steuerelements nicht normal skaliert wird

Die UEditor-Komponente ist ein von Baidu bereitgestellter Open-Source-Online-WYSIWYG-Rich-Text-Editor. Er ist leichtgewichtig, anpassbar und konzentriert sich auf die Benutzererfahrung. Er basiert auf dem MIT-Protokoll und verfügt über sehr leistungsstarke Funktionen. Kürzlich habe ich festgestellt, dass die hochgeladenen Bilder (oder in vorhandene Emoticon-Bilder eingefügt) nicht normal skaliert werden können. Klicken Sie auf das kleine Etikett am Rand des Bildes und ziehen Sie es mit der Maus. Das Bild kann jedoch nur verkleinert werden vergrößert. Ich habe viele Methoden ausprobiert, kann es aber nicht lösen. Ich habe sogar den js-Quellcode überprüft und nichts Ungewöhnliches gefunden.

Später entdeckte ich zufällig, dass Bootstrap auf der Seite eingeführt wurde und Bootstrap den Stil box-sizing standardmäßig in border-box vereinheitlicht hat. Spezifische Inhalte finden Sie im Veröffentlichungsprotokoll von Bootstrap: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/

Die Definition und Verwendung des Box-Sizing-Stils finden Sie hier: http://www.w3school.com.cn/cssref/pr_box-sizing.asp

Einflussreiches CSS in Bootstrap:

<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>;
}

Wir müssen nur das CSS auf der Seite neu definieren, um die oben genannten Stile in Bootstrap zu überschreiben, wie zum Beispiel:

<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 ist die CSS-Klasse, die für das übergeordnete Element verwendet wird und auf die UEditor-Komponente verweist.