Bootstrap-wysihtml5 Modal doesn't insert image into textarea

603
November 23, 2016, at 1:11 PM

I'm using Bootstrap-wysihtml5 to display a text editor inside an X-Editable field.

The editor has 2 buttons (link and image) that open a modal form to let you submit the link of the resource. The modals are opening but without any styles.

I just see an input field with a button on a darkened page. No container no nothing.

This is what the page looks like when I click either of those buttons

I have loaded both bootstrap.min.css and bootstrap.min.js

This is the html code of the modal

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

UPDATE

This was the original js string that displays the modal

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

I've changed it to this

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

But nothing happens when I click "insert image". On the other hand if I insert a link (which is still unedited) it goes through into the textarea.

Answer 1

Just needed to change some things around, here is the code and check the CodePen at the bottom for live demo.

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

See this CodePen: Fixed Model

Answer 2

You need to add divs with the classes modal-content and modal-dialog that enclose the entire modal. This code should work:

<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>
Rent Charter Buses Company
READ ALSO
How to show a div when a link is clicked [closed]

How to show a div when a link is clicked [closed]

So i have this html code here for my main menu:.

302
Getting a section header to stick to the top of a wrapper div

Getting a section header to stick to the top of a wrapper div

I'm trying to get a section header to stick to the top of a wrapper div, but the wrapper div needs to have a set height and the overflow set to scroll. .

320
Rearrange div order based on id name

Rearrange div order based on id name

I have the below HTML which is displayed via jQuery, it is a list of users - but I am trying to find a way to specify an id name which makes the appropriate my_list div move to the top of the order?.

324
HOW TO: Dynamic RESET of Leaflet layers control

HOW TO: Dynamic RESET of Leaflet layers control

Using Leaflet and JQuery Datatables, I am building an embedded page for our CRM. The map and the datatable use THE SAME JSON datasource, and I'm building shared functions to facilitate interactivity between the two libraries.

501