7

如何将mCustomScrollbar应用于SCEditor？

这是我迄今为止尝试过的：

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();
});

我还尝试了另一种方法，按照这个例子，但导致身体被擦除（见这个问题）

4

1 回答 1

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.

于 2015-09-22T02:11:43.597 回答