jQuery 插件：将 mCustomScrollbar 应用于 SCEditor

Posted 2023-05-07

【中文标题】jQuery 插件：将 mCustomScrollbar 应用于 SCEditor

【英文标题】：jQuery plugins: apply mCustomScrollbar to SCEditor

【发布时间】：2015-11-15 12:36:04

【问题描述】：

如何将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）

【问题讨论】：

iframe 在 jsfiddle 中不起作用。尝试使用jsbin，例如

@brunoais 但演示它正在工作

ReferenceError: reference to undefined property o.scrollButtons.tabindex jquery.mCustomScrollbar.js:910:13

@brunoais 您使用的是哪个浏览器和操作系统？你试过在你的电脑上做一个演示吗？

Firefox 39.0.3 on win7;没有。

【参考方案1】：

请看thisjsfiddle 方法...

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

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

感谢...

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