Disable bootstrap wysihtml5 when using sortable.js

Question

I have a set of sortable divs each containing text areas that I have enabled Bootstrap WYSIHTML5. This is all working fine until I try to sort, then I lose the contents of the textarea.

My solution is to disable the WYSIWYG on the start() event of sortable, then re-enable on update(). However, I've looked high and low for the code to do this and cannot find it anywhere on the GitHub page or elsewhere. https://github.com/bootstrap-wysiwyg/bootstrap3-wysiwyg

Does anyone know where this can be found or have the experience to know what the code would be?

For the record, I've tried this, but get an unknown object console error:

$('textarea').data('wysihtml5').editor.composer.disable();

Answer 1

I had this same issue and this solution seems to be working for me. The problem is the sortable functionality seems to wipe the body tag in the iframe. To get around this I'm storing the iframe body tag in a hiddenfield when the sorting starts and then putting it back in the iframe afterwards.

        $(".contentPanel").sortable({
            disabled: false,
            revert: true,
            start: function (e, ui) {
                $(document.getElementsByTagName("iframe")).each(function () {
                    $(".hdHtmlBag", $(this).parent()).val(this.contentWindow.document.body.outerHTML);
                });
            },
            stop: function (e, ui) {
                $(document.getElementsByTagName("iframe")).each(function () {
                    this.contentWindow.document.body.outerHTML = $(".hdHtmlBag", $(this).parent()).val();
                });
            }
        });

Hope this is helpful to someone.