jQuery插件：将mCustomScrollbar应用于SCEditor

如何申请 mCustomScrollbar至 SCEditor？

This是我到目前为止所尝试的：

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之后我也尝试了另一种方法,但是导致身体被擦除(见this question)

解决方法

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

由于安全原因,所有浏览器都会对iframe内容操作进行一些限制.
所以诀窍就是克服编辑器iframe的头部和主体元素然后用if包装iframe,然后放回那些克隆的元素.

需要注意的三件事情,如果不修改SCEditor库,你将不得不做一些魔术来保持编辑器的大小调整功能,因为当你调整它的大小时,一些css将丢失,滚动条将不再起作用.其他的是全屏功能,同样的问题搞乱iframe和容器的样式.最后你可以看到你需要隐含在iframe上设置一个高度,也是一个最小高度……

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

Saludos …

Adri阿根廷布宜诺斯艾利斯.

原文地址：https://www.jb51.cc/jquery/177235.html