TinyMCE - нажатие вкладки приводит к исчезновению панели инструментов

Question

У нас есть приложение Ext JS с расширенным текстовым редактором TinyMCE, которое обрабатывается расширением Ext с именем Ext.ux.TinyMCE.

В Firefox (3 и 4) и Internet Explorer 9, когда текстовое поле сфокусированои пользователь нажимает клавишу табуляции, панель инструментов исчезает.

В 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

Похоже, проблема в элементе управления Ext.form.CompositeField, который вы используете в своем примере. Ext.ux.TinyMCE не получает вызов метода onResize, когда родительское составное поле было изменено с помощью компоновщика привязки. Таким образом, редактор не имеет возможности изменить его размер.

Если вы удалите CompositeField и поместите редактор прямо в форму, тогда изменение размера будет работать правильно. Даже с расположением якоря.

Answer 2

Вы можете сделать следующее (перехватить событие клавиатуры и самостоятельно обработать вставку вкладки + отключить поведение браузера по умолчанию). Вы можете использовать этот код в своем собственном плагине или использовать параметр параметра 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, '⇥'); // insert right-indent tab entity
        else
            ed.execCommand('mceInsertContent', false, '→'); // insert normal tab entity
        evt.preventDefault();
        evt.stopPropagation();
    }
  }
});

Answer 3

Единственный способ исправить это - закомментировать код изменения размера в расширении Ext.ux.TinyMCE. Изменение размера по-прежнему работает без этого кода, что свидетельствует о конфликте между Ext, TinyMCE и кодом изменения размера расширений.