jQuery插件：将mCustomScrollbar应用于SCEditor [英] jQuery plugins: apply mCustomScrollbar to SCEditor

问题描述

如何将 mCustomScrollbar 应用于 SCEditor ？

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

This is what I've tried so far:

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

我还尝试了另一种方法，按照示例，但导致正在删除正文（请参阅这个问题）

I also tried another approach, following this example, but is causing the body being erased (see this question)

推荐答案

请看看< a href =http://jsfiddle.net/Lwvzt3mw/1/ =nofollow>这个 jsfiddle aproach ......

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

对于所有浏览器出于安全原因实施的iframe内容操作存在一些限制。
所以这个技巧基本上是克隆编辑器iframe的头部和主体元素然后用if包装iframe，然后放回那些克隆的元素。

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.

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

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 ...

Saludos...

Adri
布宜诺斯艾利斯，阿根廷。

Adri Buenos Aires, Argentina.

这篇关于jQuery插件：将mCustomScrollbar应用于SCEditor的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！