Le composant UEditor est un éditeur de texte en ligne Open Source Web Online Wysiwyg fourni par Baidu. Il est léger, personnalisable et se concentre sur l'expérience utilisateur. Il est basé sur le protocole MIT et a des fonctions très puissantes. Récemment, pendant le processus d'utilisation, j'ai constaté que les images téléchargées (ou l'insertion d'images emoji existantes) ne peuvent pas être mises à l'échelle normalement. Sélectionnez l'image, cliquez et faites glisser la petite étiquette sur le bord de l'image avec la souris, et l'image ne peut être réduite mais non agrandie. J'ai essayé de nombreuses méthodes mais je n'ai pas pu les résoudre. J'ai même vérifié le code source JS et je n'ai trouvé aucune exception.
Plus tard, j'ai découvert accidentellement que Bootstrap a été introduit sur la page, et Bootstrap définit le style de dimensionnement de la boîte sur Border-Box par défaut. Pour un contenu spécifique, veuillez consulter le journal de publication Bootstrap: http://blog.getbootstrap.com/2013/08/19/bootstrap-3-releted/
Pour la définition et l'utilisation du style de dimensionnement des boîtes, vous pouvez voir ici: http://www.w3school.com.cn/cssref/pr_box-size.asp
CSS influent en bootstrap:
*, *: avant, *: après {-webkit-box-size: border-box; -moz-box-size: border-box; box-size: border-box;}Nous avons juste besoin de redéfinir CSS sur la page pour remplacer les styles ci-dessus dans Bootstrap, tels que:
.edui-contrainer * {- webkit-box-size: content-box; -moz-box-size: content-box; box-size: content-box;}. edui-contrainer *: avant, .edui-contrainer *: after {-webkit-box-sizing: Content-box; -Moz-box-size: contenu; box-sizing: contenu-box;};* .edui-container est la classe CSS utilisée sur l'élément parent du composant UEditor.
Ce qui précède est la description complète de la solution du style de dimensionnement bootstrap 3 qui vous est présenté par l'éditeur. J'espère que cela vous sera utile. Si vous avez des questions, laissez-moi un message et l'éditeur vous répondra à temps!