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>";

但是当我点击＆＃34;插入图片＆＃34;时没有任何反应。另一方面，如果我插入一个链接（仍未编辑），它将进入textarea。

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模态不会将图像插入textarea

2 个答案: