7

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)

Community
  • 1
  • 1
Matías Cánepa
  • 5,770
  • 4
  • 57
  • 97
  • iframes don't work in jsfiddle. Try using jsbin, for example – brunoais Aug 25 '15 at 06:32
  • @brunoais but the demo it's working – Matías Cánepa Aug 25 '15 at 15:16
  • `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? – brunoais Aug 25 '15 at 21:30
  • @brunoais which browser and os are you using? Have you tried making a demo in your computer? – Matías Cánepa Aug 27 '15 at 00:02
  • Firefox 39.0.3 on win7; No. – brunoais Aug 27 '15 at 08:54
  • 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. http://www.sceditor.com/documentation/custom-plugins/ – Kiran Shakya Sep 08 '15 at 09:17

1 Answers1

0

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.

ClownCoder
  • 454
  • 6
  • 10