Bootstrap-wysihtml5 Modal不會將圖像插入到textarea中

Question

我正在使用Bootstrap-wysihtml5在X-Editable字段中顯示文本編輯器。

編輯器有2個按鈕（鏈接和圖像），打開一個模式窗體讓您提交資源鏈接。模態正在打開，但沒有任何風格。

我只是在黑暗的頁面上看到一個帶有按鈕的輸入字段。沒有容器什麼都沒有。

這是頁面的樣子，當我點擊

我已加載都bootstrap.min.css和bootstrap.min.js

這這些按鈕要麼是模態

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

的HTML代碼

UPDATE

這是顯示模式

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

但沒有任何反應，當我點擊「插入圖片」原來JS字符串。另一方面，如果我插入一個鏈接（它仍未編輯），它會進入textarea。

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>