Question

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

在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指出）是控件的高度与其容器相比。看起来这里有一些调整大小冲突或布局问题。

Answer 1

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

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();
    }
  }
});

Answer 2

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

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

Answer 3

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

TinyMCE - 按下选项卡会使工具栏消失

3 个答案: