jquery.ui.tab中的jQuery jWYSIWYG

时间:2020-03-06 14:50:01  来源:igfitidea点击:

所以我设法得到了一个带有Ajax ui.tab的页面,并且在其中一个选项卡中放置了jWYSIWYG textarea插件。不幸的是,我只能看到正常的文本区域。

但是,直接访问页面(即不使用ajax选项卡)是可行的。

发生了什么?

p / s:我是jQuery / JavaScript / AJAX / CSS的新手(即使这很重要)

解决方案

通过发布指向相关HTML文件(以及我们自己的任何自定义JavaScript文件)的链接,可以最好地解决问题。如果未托管该文件,则可以将源代码粘贴到http://pastebin.com/,然后在此处发布链接。

我预计问题在于,当ajax调用完成时,新的html会插入DOM中,但不会与jQuery挂钩。

通常,最初加载页面时,会将所有jquery优缺点添加到文档就绪或者onload事件中。但是,第一次加载页面时,textarea不在页面上。

当ajax调用返回时,文本区域将添加到页面。此时,我们需要调用所需的任何JavaScript来将其连接到jWYSIWTG控件。

jquery中有一个新功能(ish),这意味着我们仍然可以在文档就绪状态下设置所有内容(称为实时),但是我们可能会发现,更简单的方法是在ajax成功处理程序中调用联播代码。

我的解决方案是使用事件打开对话框修复对话框的宽度和高度盲点。
通过删除由插件自动创建的div.wysiwyg来关闭盲事件关闭对话框。

$('#dialogContent').bind('dialogopen', function(event, ui) {
    $('textarea').wysiwyg( {
        css :burl + 'public/css/text.css',
        controls : {
            separator00 : { visible : false },
            separator01 : { visible : false },
            separator02 : { visible : false },
            separator03 : { visible : false },
            separator04 : { visible : false },
            separator05 : { visible : false },
            separator06 : { visible : false },
            separator07 : { visible : false },
            separator08 : { visible : false },
            separator09 : { separator : false},
            insertOrderedList : { visible : true },
            insertUnorderedList : { visible : true },
            undo: { visible : true },
            redo: { visible : true },
            justifyLeft: { visible : true },
            justifyCenter: { visible : true },
            justifyFull: { visible : true },
            subscript: { visible : false },
            superscript: { visible : false },
            underline: { visible : true },
            increaseFontSize : { visible : false },
            decreaseFontSize : { visible : false },
            removeFormat : { visible : false },
            h1mozilla : { visible : false },
            h2mozilla : { visible : false },
            h3mozilla : { visible : false },
            h1 : { visible : false },
            h2 : { visible : false },
            h3 : { visible : false }
        }
    });
    $('.wysiwyg').css( {
        'width' :'350px'
        ,'height' :'180px'
    });
    $('.wysiwyg iframe').css( {
        'width' :'350px'
        ,'height' :'150px'
    });
}).bind('dialogbeforeclose', function(event, ui) {
    $('.wysiwyg').remove();
});

我的问题是jWYSIWYG框的格式会显示出来,但是我无法在其中找到光标来编辑/添加文本。

对我有用的是,在使用tab事件定义了选项卡的原始页面上加载ajax之后,加载了jWSIWYG文本框。

$("#example").tabs();
$('#example').bind('tabsshow', function(event, ui) {
    if (ui.tab.id == "alinkid") {
        $('#textfield').wysiwyg();
    }
});

然后,在HTML中,对于选项卡:

<div id="example">
    <ul>
        <li><a href="target" id="alinkid">Target</a></li>
    </ul>
</div>

在目标页面上,我们将拥有一个ID为'textfield'的普通文本区域