TinyMCE - 按 Tab 会导致工具栏消失答案

【问题标题】：TinyMCE - pressing tab causes the toolbar to disappearTinyMCE - 按 Tab 会导致工具栏消失
【发布时间】：2011-06-08 00:41:28
【问题描述】：

我们有一个带有 TinyMCE 富文本编辑器的 Ext JS 应用程序，由名为 Ext.ux.TinyMCE 的 Ext 扩展处理。

在 firefox（3 和 4）和 internet explorer 9 中，当文本框获得焦点并且用户点击 tab 键时，工具栏会消失。

在 chrome (11) 中插入了一个标签。

在微型 MCE 演示页面上看不到此行为： http://tinymce.moxiecode.com/tryit/full.php

但是可以在 Ext.ux.TinyMCE 页面上看到： http://blogs.byte-force.com/xor/tinymce/

任何人有解决办法，或建议如何解决这个问题？

更新

在@XOR 的有用评论之后，我开始研究可以成为选项卡焦点的事物。我们没有显示状态栏，但我检查了隐藏的状态栏是否仍然可以获得焦点。我认为情况并非如此。

似乎获得焦点的是表格末尾的一个奇怪的锚标记，它代表控件。

<a href="#"></a>

当我通过 firebug 删除它时，选项卡不再隐藏工具栏。然而，以编程方式删除它只是一种解决方法，主要问题（@XOR 再次指出）是控件与其容器相比的高度。这里似乎存在一些调整大小冲突或布局问题。

【问题讨论】：

克里斯，你有某种测试页面来展示这种行为吗？我现在尝试了我的演示，发现当编辑器不完全适合其起搏器时，工具栏会消失。在这种情况下，选项卡会将您定位到剪辑下覆盖的编辑器的状态栏。状态栏滚动到视图中，而工具栏被隐藏。
谢谢。我可以看到您现在已经在该页面上修复了它，并且解释很有意义，但是我们将状态栏位置设置为“无”。我们如何确保编辑器适合占位符？
Chris，试着做一个独立的测试页面，我会看看。编辑器必须适合占位符，但有一些棘手的错误有时会阻止其正确行为。
这里是一个例子：witzelsucht.co.uk/codetest/testmce.html 很明显这是导致问题的锚设置。对于这个例子来说，简单地删除它就可以了，但我不能在应用程序中这样做。

标签： extjs tinymce

【解决方案1】：

您可以执行以下操作（捕获键盘事件并自己处理选项卡的插入 + 禁用默认浏览器行为）。您可以在自己的插件中使用此代码或使用 tinymce 初始化参数设置

ed.onKeyPress.add(function(ed, evt) {

  // Tab is pressed
  if (evt.keyCode == 9 && !evt.ctrlKey)
  {

    // check, whether the cursor is inside of a list or not
    var range = ed.selection.getRng();
    var rangeStartNode = range.startContainer;

    /*
    Check if the selcted range is sourrounded by a list
    node, because inside a listing the TAB key should have
    it's original function (indent or outdent (shift))
    */
    if (!t.isSurroundedBy(rangeStartNode, 'LI') && !t.isSurroundedBy(rangeStartNode, 'UL') && !t.isSurroundedBy(rangeStartNode, 'OL') && !t.isSurroundedBy(rangeStartNode, 'TD') && !t.isSurroundedBy(rangeStartNode, 'TH'))
    {
        if (is_win && evt.shiftKey || mac && evt.altKey)
            ed.execCommand('mceInsertContent', false, '&#x21e5;'); // insert right-indent tab entity
        else
            ed.execCommand('mceInsertContent', false, '&#x2192;'); // insert normal tab entity
        evt.preventDefault();
        evt.stopPropagation();
    }
  }
});

【讨论】：

谢谢，这看起来绝对是最后的手段。我喜欢 chrome 中的行为，我不想停止。

【解决方案2】：

看起来问题出在您在示例中使用的 Ext.form.CompositeField 控件中。当父复合字段通过锚布局调整大小时，Ext.ux.TinyMCE 未收到对 onResize 方法的调用。所以编辑器没有机会改变它的大小。

如果您要删除 CompositeField 并将编辑器直接放入表单中，则调整大小可以正常工作。即使是锚布局。

【讨论】：

感谢您的更新。首先，这似乎与我的发现有点相反。如果我禁用 Ext.ux.TinyMCE 调整大小代码，问题就会消失。还是我错过了什么？其次，这个例子是一个简化；我们有一个名为 switchable field 的实体，它扩展了复合字段，这意味着用户可以查看和编辑版本。我们无法更改复合字段。

【解决方案3】：

我发现解决此问题的唯一方法是注释掉 Ext.ux.TinyMCE 扩展中的调整大小代码。如果没有此代码，调整大小似乎仍然有效，这表明 Ext、TinyMCE 和扩展调整大小代码之间存在冲突。

【讨论】：