jQuery 插件：将 mCustomScrollbar 应用于 SCEditor

我该如何申请m自定义滚动条 http://manos.malihu.gr/jquery-custom-content-scroller/ to SCEditor http://www.sceditor.com/?

This http://jsfiddle.net/5sgenerz/到目前为止我已经尝试过：

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

我也尝试了另一种方法，遵循这个example https://github.com/malihu/malihu-custom-scrollbar-plugin/blob/master/examples/iframe_example.html，但导致主体被擦除（参见这个问题 https://stackoverflow.com/q/31994342/702353)

请看一下this http://jsfiddle.net/Lwvzt3mw/1/jsfiddle 方法...

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

出于安全原因，所有浏览器都实施有关 iframe 内容操作的一些限制。 所以技巧基本上是克隆编辑器 iframe 的 head 和 body 元素，然后用 div 包裹 iframe，然后放回那些克隆的元素。

需要注意的三件事，在不修改 SCEditor 库的情况下，您将不得不做一些魔术来保持编辑器的调整大小功能，因为当您调整它的大小时，一些 css 将丢失，并且滚动条将不再工作。另一件事是全屏功能，同样的问题是 iframe 和容器上的样式混乱。最后你可以看到，你需要在 iframe 上隐式设置一个高度，这也是一个最小高度......

希望这个小小的贡献对你有帮助..

致敬...

阿德里 阿根廷布宜诺斯艾利斯。