Bootstrap-wysihtml5 Modal 不将图像插入文本区域

Question

我正在使用 Bootstrap-wysihtml5 在 X-Editable 字段中显示文本编辑器。

编辑器有 2 个按钮（link 和图像）打开模态表单让您提交资源的 link。模态正在打开，但没有任何样式。

我只在变暗的页面上看到一个带有按钮的输入字段。没有容器什么都没有。

这是我单击这些按钮中的任何一个时页面的样子

我已经加载了 bootstrap.min.css 和 bootstrap.min.js

这是模态的html代码

<div class="bootstrap-wysihtml5-insert-image-modal modal hide fade in" style="display: block; padding-right: 17px;">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Insert image</h3>
    </div>
    <div class="modal-body">
        <input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge">
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>
        <a href="#" class="btn btn-primary" data-dismiss="modal">Insert image</a>  
    </div>
</div>

更新

这是显示模态的原始js字符串

return "<li>" +
          "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
            "<div class='modal-header'>" +
              "<a class='close' data-dismiss='modal'>&times;</a>" +
              "<h3>" + locale.image.insert + "</h3>" +
            "</div>" +
            "<div class='modal-body'>" +
              "<input value='http://' class='bootstrap-wysihtml5-insert-image-url input-xlarge'>" +
            "</div>" +
            "<div class='modal-footer'>" +
              "<a href='#' class='btn' data-dismiss='modal'>" + locale.image.cancel + "</a>" +
              "<a href='#' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</a>" +
            "</div>" +
          "</div>" +
          "<a class='btn btn-default" + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='glyphicon glyphicon-picture'></i></a>" +
        "</li>";

我改成了这个

return "<li>" +
            "<div class='bootstrap-wysihtml5-insert-image-modal modal hide fade'>" +
        "<div id='myModal' class='modal fade in' tabindex='-1' role='dialog' aria-labelledby='myModalLabel' style='display: block;'>" +
            "<div class='modal-dialog' role='document'>" +
                "<div class='modal-content'>" +
                    "<div class='modal-header'>" +
                        "<button type='button' class='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>&times;</span></button>" +
                        "<h4 class='modal-title' id='myModalLabel'>" + locale.image.insert + "</h4>" +
                    "</div>" +
                    "<div class='modal-body'>" +
                        "<h4>Insert Image Link</h4>" +
                         "<input value='http://' class='bootstrap-wysihtml5-insert-image-url form-control'>" +
                    "</div>" +
                        "<div class='modal-footer'>" +
                        "<button type='button' class='btn btn-default' data-dismiss='modal'>" + locale.image.cancel + "</button>" +
                        "<button type='button' class='btn btn-primary' data-dismiss='modal'>" + locale.image.insert + "</button>" +
                "</div>" +
            "</div>" +
        "</div>" +
        "</div>" +
            "</div>" +
            "<a class='btn btn-default" + size + "' data-wysihtml5-command='insertImage' title='" + locale.image.insert + "' tabindex='-1'><i class='glyphicon glyphicon-picture'></i></a>" +
    "</li>";

但是当我点击 "insert image" 时没有任何反应。另一方面，如果我插入 link（仍未编辑），它会进入文本区域。

Answer 1

您需要添加带有类 modal-content 和 modal-dialog 的 div 来包围整个模式。此代码应该有效：

<div class="bootstrap-wysihtml5-insert-image-modal modal hide fade in" style="display: block; padding-right: 17px;">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <a class="close" data-dismiss="modal">×</a>
            <h3>Insert image</h3>
        </div>
        <div class="modal-body">
            <input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge">
        </div>
        <div class="modal-footer">
            <a href="#" class="btn" data-dismiss="modal">Cancel</a>
            <a href="#" class="btn btn-primary" data-dismiss="modal">Insert image</a>  
        </div>
    </div>
</div>
</div>

Answer 2

只是需要改变一些东西，这里是代码，查看底部的 CodePen 进行现场演示。

<div class="container">
   <!-- Button trigger modal -->
   <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Super Awesome Modal</button>

   <!-- Modal -->
   <div class="modal fade bootstrap-wysihtml5-insert-image-modal " id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
     <div class="modal-dialog" role="document">
       <div class="modal-content">
         <div class="modal-header">
           <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
           <h3 class="modal-title" id="myModalLabel">Insert image</h3>
         </div>
         <div class="modal-body">
            <input value="http://" class="bootstrap-wysihtml5-insert-image-url input-xlarge">
         </div>
         <div class="modal-footer">
           <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
           <a href="#" class="btn btn-primary" data-dismiss="modal">Insert image</a>  
         </div>
       </div>
     </div>
   </div>
</div>

查看此 CodePen：Fixed Model

Bootstrap-wysihtml5 Modal 不将图像插入文本区域

Bootstrap-wysihtml5 Modal doesn't insert image into textarea

html

css

jquery

twitter-bootstrap

bootstrap-modal