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)

Separable

iframes don't work in jsfiddle. Try using jsbin, for example – Ezar

@Ezar but the demo it's working – Gregarious

ReferenceError: reference to undefined property o.scrollButtons.tabindex jquery.mCustomScrollbar.js:910:13 <- I wonder about this... Are there any explanation steps on how to apply this to a different document than the current one? – Ezar

@Ezar which browser and os are you using? Have you tried making a demo in your computer? – Gregarious

Firefox 39.0.3 on win7; No. – Ezar

The demo is not working. And as far as I know, handling iframe dom may be bad idea. You should make a plugin for SCEditor instead. Have a look at following link for information. sceditor.com/documentation/custom-plugins – Countertenor

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.

Meurer