jquery.ui.tab 中的 jQuery jWYSIWYG答案

【问题标题】：jQuery jWYSIWYG inside jquery.ui.tabjquery.ui.tab 中的 jQuery jWYSIWYG
【发布时间】：2010-09-13 18:22:49
【问题描述】：

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

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

发生了什么？

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

【问题讨论】：

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

标签： jquery

【解决方案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”的普通文本区域

【讨论】：