TinyMce 与 Facebox答案

【问题标题】：TinyMce with FaceboxTinyMce 与 Facebox
【发布时间】：2012-04-07 11:45:16
【问题描述】：

我在 Facebox 模式弹出窗口内的文本框上使用 tinymce 时遇到了一些问题。我正在尝试进行以下操作-

有一个父页面，我正在其中加载tinymce.min.js javascript 文件并执行tinyMCE.init()。
父页面上有一个按钮，单击该按钮时，我会调用一个 javascript 函数进行 ajax 调用，并在 facebox 中显示 ajax 调用的返回 html。
ajax 调用返回的 HTML 中有一个文本框，我需要对其进行 tinyMCEd。
我有一个已注册的事件处理程序，它已绑定到事件 afterReveal.facebox - 从文档看来，它是在渲染面部框后调用的（尽管文档不是很清楚）
在上面的事件处理程序中，我有以下代码-

tinyMCE.execCommand('mceAddControl', true, 'new-outline')

new-outline 是需要tinyMCEd 的textarea 的id。

我没有收到任何 JS 错误，并且 textarea 变成了 tinymce 编辑器。但是，编辑器会跳出 facebox（右侧），并且只有编辑器的一部分可见。

如果我不把它变成小 mce，那么 textarea 会在 facebox 内正确呈现。

我该如何纠正这个问题？

【问题讨论】：

最好向我们展示您的 tinymce 的完整初始化配置

标签： jquery tinymce facebox

【解决方案1】：

由于我的 CSS 中的一些样式问题，我遇到了这个问题。如果您想做这样的事情，我所描述的方法是实现这一目标的最佳方法。

【讨论】：

【解决方案2】：

最好向我们展示您对 tinymce 的完整初始化配置。如果编辑器没有显示，并且您使用开发者控制台没有出现 javascript 错误，则很可能是您的 tinymce 配置错误。

【讨论】：

谢谢。碰巧的是，我在 CSS 中的样式存在一些问题，我已修复。我尝试的方法没有问题。这是最好的方法。
你的方法看起来确实不错

【解决方案3】：

确保您的facebox.js中存在以下行

reveal: function(data, klass) {
      $(document).trigger('beforeReveal.facebox')
      if (klass) $('#facebox .content').addClass(klass)
      $('#facebox .content').empty().append(data)
      $('#facebox .popup').children().fadeIn('normal')
      $('#facebox').css('left', $(window).width() / 2 - ($('#facebox .popup').outerWidth() / 2))
      // Below Line 
      $(document).trigger('reveal.facebox').trigger('afterReveal.facebox'); // This Line
    }

而你的facebook弹出页面，你必须使用以下代码。

$(document).bind('afterReveal.facebox', function() {
    tinyMCE.execCommand('mceAddControl', true, 'content');
    // Here 'content' is editor (textarea) id
});

注意：不需要在你的facebox弹出中初始化tinyMCE配置。

【讨论】：