无法在 joomla 的 jQueryUI 对话框中输入 TinyMCE 编辑器答案

【问题标题】：Can't type in TinyMCE editor within a jQueryUI dialog box in joomla无法在 joomla 的 jQueryUI 对话框中输入 TinyMCE 编辑器
【发布时间】：2013-04-29 21:12:42
【问题描述】：

我正在使用 joomla 内置函数在 jQuery 对话框内的页面上创建 tinyMCE 编辑器。但是，出现对话框，并且 tinyMCE 编辑器就像它处于只读模式一样。

这是回显编辑器的 php 内置函数：

<div id="PhoneCallCard" title="Phone Call Card" style="display:none;">      
    <?php
      $editor = JFactory::getEditor();                                                                                          
      echo $editor->display('commentz', $this->content, '600', '100', '60', '20', false);      
    ?>
</div>

这是我打开该对话框的 jQuery 实现：

jQuery("#PhoneCallCard").dialog({
            height:500,
            width:800,
            modal: true,
            close: function(ev, ui){                                                
              jQuery('#tablepanelfightclubrequests .trSelected').removeClass('trSelected');                         
              },
            open:function({ //Everything I tried to activate the tinyMCE
           //tinyMCE.activeEditor.getBody().setAttribute('contenteditable', false);
           //tinyMCE.execCommand('mceRemoveControl',false,'commentz');
           //tinyMCE.execCommand('mceAddControl',false,'commentz');
           //tinyMCE.execCommand('mceFocus', false, 'commentz');
            }});

我在Why can't I type in TinyMCE in my jQueryUI modal dialog? 和TinyMCE and JQuery dialog: TinyMCE read only when modal:true in the Dialog 也发现了类似的问题，但都不能解决我的问题

【问题讨论】：

标签： joomla tinymce joomla2.5

【解决方案1】：

我遇到了同样的问题，并在页面加载时通过加载对话框修复。例如：

jQuery(function() {
jQuery( "#dialog_desc" ).dialog({
    modal: true,
    width: 600,
    height:500,
    autoOpen: false,
});
}

当你想打开对话框时：

    jQuery( "#dialog_desc" ).dialog( "open" );

希望对您有所帮助！

【讨论】：

【解决方案2】：

我也遇到了同样的错误... 我的第一个代码

$( "#f_edit_gallery" ).dialog({
autoOpen: false,
resizable: true,
show: "clip",
height:450,
width:850,
modal: true
});

删除选项后

show: "clip",

像这样

$( "#f_edit_gallery" ).dialog({
    autoOpen: false,
    resizable: true,
    height:450,
    width:850,
    modal: true
    });

tinyMCE 之后运行良好

【讨论】：

【解决方案3】：

您应该在加载对话框后加载编辑器。你可以做的是：

使用 $editor->display 方法加载编辑器
在打开 jquery ui 对话框之前，分离编辑器
显示 UI 对话框并再次加载编辑器，稍有延迟，以便编辑器在对话框后加载。

这是一个示例代码

在触发对话框打开后使用此代码

if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){
  tinyMCE.activeEditor.remove();
  setTimeout(function(){
    tinyMCE.execCommand('mceAddControl', false, 'commentz');
  },500);
}

【讨论】：

【解决方案4】：

激活 TinyMCE 时需要设置超时，因为对话框初始化时需要等待时间。

例如：

$("#PositionShowDialog").dialog({
modal: true,
open: setTimeout('Change_TextareaToTinyMCE_OnPopup("#elementId");', 1000),
width: width,
......

如果 tinymce 已加载但您无法输入（如禁用）。你需要设置更多的时间来设置超时。

对不起，我的英文皮肤不好

【讨论】：

【解决方案5】：

从 Nagarjun 的回答中进行的小修正使脚本对我有用：

if ((tinyMCE != undefined) && (tinyMCE.activeEditor != undefined)){  
  tinyMCE.activeEditor.remove();  
  $("#dialogId").dialog('open');  
  setTimeout(function(){  
    tinyMCE.execCommand('mceAddControl', false, 'commentz');  
  },500);  
}

ie : 我需要在打开对话框并启动超时之前删除 tinyMCE

【讨论】：