Bootstrap-wysihtml5 模态不会将图像插入文本区域

Question

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

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

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

这就是我点击其中任一按钮时页面的样子

我已经加载了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>";

但是当我点击“插入图片”时没有任何反应。另一方面，如果我插入一个链接（仍然未经编辑），它会进入文本区域。

Answer 1

只是需要改变一些东西，这里是代码并检查底部的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

Answer 2

您需要添加带有 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>