如何将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方法...

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上隐式设置一个高度,同时也是一个最小高度...

希望这点贡献能对您有所帮助。

礼炮...

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

关于jquery - jQuery插件: apply mCustomScrollbar to SCEditor,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/32142462/

10-14 17:30
查看更多