jQuery plugins: apply mCustomScrollbar to SCEditor

Question

How can I apply mCustomScrollbar to SCEditor ?

This is what I've tried so far:

HTML

<button id="btnScrollBar">Apply scrollbar</button>
<textarea id="editor"></textarea>

JS

$("#editor").sceditor({
    plugins: "xhtml",
    width: '100%',
    style: "http://www.sceditor.com/minified/jquery.sceditor.default.min.css"
});

$("#btnScrollBar").click(function()
{
    console.log("click");
    $(".sceditor-container iframe").contents().find("body").mCustomScrollbar();
});

I also tried another approach, following this example , but is causing the body being erased (see this question )

Answer 1

Please take a look to this jsfiddle aproach...

var $iframe = $(".sceditor-container iframe");
var $iHtml = $iframe.contents().find('html');
var $iHead = $iframe.contents().find('head');
var $iBody = $iframe.contents().find('body');
var height = $iframe.height();
var head = $('<div />').append($iHead.clone()).html();
var body = $('<div />').append($iBody.clone()).html();

$(".sceditor-container iframe")
    .wrap('<div class="iframe-container" />')
    .parent()
    .height(height);

$('.iframe-container').mCustomScrollbar({ axis: 'y' });

$iframe.attr('scrolling', 'no');
$iframe.height(1000);
$iframe.contents().find('html').html(body);
$iframe.contents().find('head').html(head);

There are some restrictions about iframe content manipulation that all browsers implement for security reasons. So the trick it's basically clone head and body elements of the editor's iframe then wrap the iframe with a div, and later put back those cloned elements.

Three things to note, without modifying SCEditor library you will have to do some magic to keep editor's resizing functionality, because when you resize it some css will be lost and the scrollbar won't work anymore. Other thing is the fullscreen functionality, same issue messing styling on iframe and container. And last thing as you can see you need to implicit set a height on the iframe, would be a min-height as well...

Hope this little contribution helps you..

Saludos...

Adri Buenos Aires, Argentina.