WYSIHTML5 doesn't work in a bootstrap modal

[goodbomb]

So I've been trying to get this plugin to work with jschr's Bootstrap Modal (https://github.com/jschr) but it just doesn't want to cooperate. The files I'm calling in the header look like this:

script src="js/vendor/bootstrap-wysihtml5/lib/js/wysihtml5-0.3.0.js"
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
script src="js/vendor/bootstrap.min.js"
script src="js/vendor/bootstrap-modal/js/bootstrap-modalmanager.js"
script src="js/vendor/bootstrap-modal/js/bootstrap-modal.js"
script src="js/vendor/bootstrap-wysihtml5/src/bootstrap-wysihtml5.js"

I've tried putting the bootstrap-wysihtml5.js file before the modalmanager as well, but it made no difference.

What's happening is that the iframe's body isn't getting the correct js passed to it (from what I can tell). As a result, the editing area is uneditable and the toolbar is able to modify and affect everything on the page (including the content in the background).

The body tag inside of the iframe is empty and just shows this:

body marginwidth="0" marginheight="0"

Any help on this would be greatly appreciated.

[flamebunny]

Hey there,
Did you manage to get WYSIHTML5 to work inside a modal?

[maximebeaudoin]

👍 I have the same issue. I'll try to figure out what is the problem

[flamebunny]

I managed to get it to work
Dont need to change the order of the script files

Default.html
button with id modal_ajax_demo_btn
div with id ajax-modal
script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"
script src="../Scripts/lib/bootstrap.min.js"
script src="../Scripts/lib/bootstrap-modalmanager.js"
script src="../Scripts/lib/bootstrap-modal.js"
script src="../Scripts/lib/wysihtml5-0.3.0.js"
script src="../Scripts/lib/bootstrap-wysihtml5.js"
script src="../Scripts/lib/ui-modals-compose.js"
script UIModals.init();

ui-modals-compose.js
var UIModals = function () {
    
    var initModals = function () {
       
        $.fn.modalmanager.defaults.resize = true;
    $.fn.modalmanager.defaults.spinner = '
  Loading...
';
    var $modal = $('#ajax-modal');
 
    $('#modal_ajax_demo_btn').on('click', function(){
    // create the backdrop and wait for next modal to be triggered
         $('body').modalmanager('loading');      
         setTimeout(function(){
              $modal.load('inbox_compose.html', '', function () {
               $modal.modal();
                       // call Wysihtml5 here
               initWysihtml5();      
          });
             }, 1000);
    }); 
    }
    var initWysihtml5 = function () {
        $('.inbox-wysihtml5').wysihtml5({
            "stylesheets": ["../Content/css/wysiwyg-color.css"]
        });
    }
    return {
        //main function to initiate the module
        init: function () {
            initModals();      
        }
    };
}();

hope it helps

[spin0us]

Not working for me too.

[ghost]

wysiwyg editor does not works in bootstrap modal because it triggers before creating modal.. or something. so the best way to do it is triggering the modal before wysiwyg editor. so the code should be

cant post the js via comment. its runing the code. so i am sharing the link i found this trick.
hope it helps
http://ask.oykko.com/question/13

[nithinstany]

Even not working for me . I am using Jquery dialog . I am getting editor in Dialog(popup), but i can't enter text in text area

[ghost]

check this code above.
You need to put your textarea via js. then active it.
so its safe to say you have to put the modal body via js then active all of it

[nithinstany]

Here is my Ajax code. Still i can't enter data in textarea. Please correct the code if i am wrong
$("#divid").dialog({ width: 500, title: "New Instruction", modal: true, resizable: false });
$("#divid").html("<%= escape_javascript(render :partial => 'form')%>")
$('.html-editor').wysihtml5({"font-styles": true, "emphasis": true,"lists": true, "html": false, "link": true, "image": true,
"color});

[ghost]

Here is a example of how to use wysihtml5 editor in bootstraps modal.. hope it helps...
http://oykko.blogspot.com/2013/07/use-wysiwyg-editor-in-bootstrap-modal.html

[studentIvan]

2 months ago
i'm waiting

[ndogaru]

We got bootstrap-wysihtml5 to work with bootstrap 2.3.1 modal.The key is to make sure that the editor is set up on the show event of the modal not on document ready.

[goodbomb]

Confirmed what @ndogaru said. This is the code I used to get it working:

$(document).ready(function(){
    $('#modal').on('shown', function(){
        $('#textarea').wysihtml5();
    });
});

Edit: Actually, the above code causes the wysiwyg toolbar to duplicate every time the modal is opened. Haven't figured out a way to prevent that yet.

[goodbomb]

Got it! Woo! This issue can now be resolved. You have to remove the iFrame and toolbar whenever the modal is hidden and re-show the textarea so that on each subsequent modal display, the wysithml5 function starts all over again. This is what I did:

$(document).ready(function(){
    $('#modal').on('shown', function(){
        $('#textarea').wysihtml5();
    });

    $('#modal').on('hidden', function(){
        $('.wysihtml5-sandbox, .wysihtml5-toolbar').remove();
        $('#textarea').show();
    });
});

[ammarjabakji]

You can also use this :

$('#modal').on('shown.bs.modal', function () {
   $('#textarea-id').wysihtml5();
}