jQuery插件：将mCustomScrollbar应用于SCEditor

如何将mCustomScrollbar应用于SCEditor？jQuery插件：将mCustomScrollbar应用于SCEditor

This是我到目前为止已经试过：

HTML

<button id="btnScrollBar">Apply scrollbar</button> 
<textarea id="editor"></textarea>

$("#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）

来源

2015-08-21 Matías Cánepa

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

@brunoais，但它的演示工作 –

'ReferenceError：引用未定义的属性o.scrollButtons.tabindex jquery.mCustomScrollbar.js：910：13' < - 我想知道这个...有没有任何解释如何将其应用于与当前版本不同的文档？ – brunoais

请看看到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的克隆头和主体元素，然后用div包装iframe，然后放回那些克隆的元素。

需要注意的三件事，不修改SCEditor库，你将不得不做一些魔术来保持编辑器的大小调整功能，因为当你调整它的大小时，一些css将会丢失，滚动条将不再工作。其他的事情是全屏功能，同样的问题在iframe和容器上搞乱了样式。和过去的事情，你可以看到你需要一套隐在的iframe的高度，将是一个最小高度，以及...

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

Saludos ...

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

来源

2015-09-22 02:11:43 ClownCoder

jQuery插件：将mCustomScrollbar应用于SCEditor

回答

相关问题