jquery.ui.tab 中的 jQuery jWYSIWYG

Posted 2023-05-08

【中文标题】jquery.ui.tab 中的 jQuery jWYSIWYG

【英文标题】：jQuery jWYSIWYG inside jquery.ui.tab

【发布时间】：2010-09-13 18:22:49

【问题描述】：

所以我设法使用 Ajax ui.tab 获得了一个页面，并在其中一个选项卡中放置了 jWYSIWYG textarea 插件。不幸的是，我只能看到普通的文本区域。

但是，直接访问页面（即不使用 ajax 选项卡）是可行的。

发生了什么？

p/s：我是 jQuery / javascript / AJAX / CSS 的新手（如果这很重要的话）

【问题讨论】：

这个帖子已经有一个多月了，仍然没有得到答复。我发现在发帖寻求帮助时，您提供的信息越多，人们就越有可能帮助您。甚至有人在一个地方（单行与否）发布要求所有代码。你拒绝了他，还指望别人帮忙？

【参考方案1】：

我预计问题是，当 ajax 调用完成时，新的 html 被插入到 DOM 中，但没有与 jQuery 挂钩。

通常，当页面最初加载时，您会将所有 jquery 优点附加到文档就绪或 onload 事件中。但是，当页面首次加载时，您的 textarea 不在页面上。

当您的 ajax 调用返回时，文本区域被添加到页面中。此时，您需要调用所需的任何 javascript 将其连接到 jWYSIWTG 控件。

jquery 中有一个新的（ish）功能，这意味着您仍然可以在文档中准备好所有内容（称为live），但您可能会发现在您的 ajax 成功处理程序中调用连接代码更简单。

【参考方案2】：

最好通过发布指向相关 HTML 文件（以及您自己的任何自定义 JavaScript 文件）的链接来回答您的问题。如果文件未托管，您可以将源代码粘贴到http://pastebin.com/，并在此处发布链接。

【讨论】：

我直接从他们的网站上获取了示例。非常简单的 1 个衬垫。它们都独立工作，但不是当 jWYSIWYG 在选项卡内时。

【参考方案3】：

我的解决方案是通过事件打开对话框修复对话框的宽度和高度。 通过删除插件自动创建的 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();
);

【参考方案4】：

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

对我有用的是在使用选项卡事件定义选项卡的原始页面上加载 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”的普通文本区域