TinyMCE - 按壓選項卡會導致工具欄消失

我們有一個Ext JS應用程序，它帶有一個名爲Ext.ux.TinyMCE的Ext擴展程序處理的TinyMCE富文本編輯器。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>

當我通過螢火蟲刪除此標籤不再隱藏工具欄。然而，以編程方式刪除這只是一個解決方法，主要問題（再次指出@XOR）是控件相比其容器的高度。看起來好像這裏有一些調整衝突或佈局問題。

來源

2011-06-08 Chris Simpson

克里斯，你有某種測試頁面來展示這種行爲嗎？我現在嘗試了我的演示，看到編輯器完全不適合它的速度控制器時，該工具欄消失。在這種情況下，選項卡會將您置於剪輯下面的編輯器的狀態欄中。狀態欄滾動到視圖中，而工具欄被隱藏。 – XOR 2011-06-08 06:10:47

謝謝。我可以看到，現在你已經修復了該頁面，並且解釋有意義，但是我們已經將狀態欄位置設置爲「無」。我們如何確保編輯器適合佔位符？ – 2011-06-08 16:40:03

Chris，試着做一個獨立的測試頁面，我會看看它。編輯器必須適合佔位符，但有一些棘手的錯誤，有時會阻止它正確的行爲。 – XOR 2011-06-08 18:40:36

我找到解決這一問題是在Ext.ux.TinyMCE擴展註釋掉調整大小代碼的唯一方法。如果沒有此代碼，調整大小似乎仍然有效，表明Ext，TinyMCE和擴展大小調整代碼之間存在衝突。

來源

2011-06-13 19:08:09

您可以執行以下操作（捕獲鍵盤事件並自行處理選項卡的插入並禁用默認瀏覽器行爲）。您可以使用此代碼裏面自己的插件或使用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(); 
    } 
    } 
});

來源

2011-06-08 07:54:38 Thariama

謝謝，這看起來像是一個絕對的最後手段。我喜歡Chrome中的行爲，我不想阻止它。 – 2011-06-08 16:41:17

看起來問題出在您示例中使用的Ext.form.CompositeField控件中。 Ext.ux.TinyMCE在通過錨點佈局調整父級組合字段時未收到對onResize方法的調用。所以編輯沒有機會改變它的大小。

如果要刪除CompositeField並將編輯器右鍵放置到窗體中，那麼調整大小工作正常。即使有錨佈局。

來源

2011-06-14 09:54:18 XOR

感謝您的更新。首先，這與我發現的有點相反。如果我禁用Ext.ux.TinyMCE調整大小代碼，問題就會消失。或者我錯過了什麼？其次，這個例子是一個簡化;我們有一個名爲可切換字段的實體，它擴展了複合字段，意味着用戶可以查看和編輯版本。我們無法更改複合字段。 – 2011-06-15 16:34:08

TinyMCE - 按壓選項卡會導致工具欄消失

回答

相關問題