Question

我有点蠢 - 而且作为一个较新的Stack Overflow用户，我希望我在正确的位置发布这个。

我目前正在修补Froala Editor并且已经学习了很多。然而，当我开始查看文档并深入研究它时，我在集成Bootstrap时遇到了一些问题。

基本上，我希望它能够在触发动作时，将预先创建的“块”插入到编辑器中。我对此功能没有任何问题，但是当该块的内容无法正确显示时，我的问题就开始了。

要创建自定义块触发器，我将var widget集成到JS中（为了更好的可读性而格式化）：

widget = '<a href="#" class="btn btn-success">Bootstrap Works!</a><br>
         <div class="container-fluid">

             <div class="row">

                 <div class="col-xs-6" style="background:yellow;">
                     <h2>Title One</h2>
                     <img src="http://placehold.it/140x140" class="img-circle img-responsive">
                 </div>

                 <div class="col-xs-6" style="background:red;">
                     <h2>Title Two</h2>
                     <img src="http://placehold.it/140x140" class="img-circle img-responsive">
                 </div>

             </div>

         </div>';

选择“第一个小部件”（默认选项），然后单击“添加小部件”。一切都按预期工作 - 除了两个col-xs-6堆叠在一起之外，而不是像通常那样浮动到列中。

在此处查看示例： http://nyit.me/wysiwyg/5-cstm/2.php

我尝试调整.container和.container-fluid，调整Froala中的一些自定义设置（包括padding: 0;和margin: 0;），并调整基本body和{ {1}} CSS，但似乎没有任何效果。最终，我感觉我错过了一些非常简单的东西，完全过分思考了这一点。

感谢您的任何建议！

ž

Answer 1

您遇到的问题与box-sizing有关。 Github上有commit可以解决您的问题。

使用Bootstrap作为Froala编辑器中的自定义工具栏按钮

1 个答案: