在 Froala Editor 中使用 Bootstrap 作为自定义工具栏按钮

Question

我有点困惑 - 作为 Stack Overflow 的新用户，我希望我把这篇文章发布在正确的地方。

我目前正在修改 Froala Editor 并且学到了很多东西。然而，当我开始查看文档并深入研究时，我在集成 Bootstrap.

时遇到了一些问题

基本上，我希望它在触发动作时将预先创建的 "block" 插入到编辑器中。我对这个功能没有问题，但当该块的内容显示不正确时，我的问题就开始了。

为了创建自定义块触发器，我将 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>';

Select "first widget"（默认选项）并单击 "Add Widget." 一切都按预期工作 - 除了两个 col-xs-6 的堆栈彼此叠加而不是浮动列，因为它通常会。

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

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

感谢任何建议！

z

Answer 1

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

在 Froala Editor 中使用 Bootstrap 作为自定义工具栏按钮

Using Bootstrap as a custom toolbar button in Froala Editor

twitter-bootstrap

froala