微小的MCE：如何讓人縮進

我想知道如何讓人們在微小的MCE編輯器中縮進。現在，只要有人按tab，他們就會進入下一個領域。有沒有任何代碼可以讓他們實際打到tab，並讓它爲新的段落創建一個標籤。微小的MCE：如何讓人縮進

2012-11-24 sinθ

本文討論這個問題：http： //www.pixelastic.com/blog/159:tabindexing-and-inserting-tabs-with-tinymce – Tim

@Tim我很困惑。每次我在這個問題上進行網絡搜索時，我都會找到與問題相反的人的鏈接。當我點擊標籤時，它跳到下一個字段。似乎只要有人點擊標籤，它不會跳轉到下一個字段（您的文章）。 –

如果用戶按下標籤頁，您可以捕獲此事件和stopPropagation/return false。

// Adds an observer to the onKeyUp event using tinyMCE.init 
tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.onKeyDown.add(function(ed, evt) { 
      console.debug('Key up event: ' + evt.keyCode); 
      if (evt.keyCode == 9){ // tab pressed 
      ed.execCommand('mceInsertRawHTML', false, '\x09'); // inserts tab 
      evt.preventDefault(); 
      evt.stopPropagation(); 
      return false; 
      } 
     }); 
    } 
});

在情況下，用戶在一個段落，將得到由瀏覽器刪除的開頭或末尾插入選項卡（對於此一解決方法是插入預定長度的特殊字符不是一個選項卡）。

來源

2012-11-26 09:16:51 Thariama

有什麼辦法可以阻止光標跳到下一個字段。現在，它會插入選項卡，但也會移至下一個字段。 –

另外，變量'evt'只是給出了一個錯誤。 –

這是我的失敗（有必要停止事件的冒泡），我糾正了它在我的代碼上面 – Thariama

Thariama的解決方案並不適合我。我同意Jon Hulka的解決方案。這似乎在Firefox（mac + pc），Chrome（mac + pc）和Internet Exploder上運行良好。這並不完美，但我覺得它非常實用並且可以接受。由於喬恩

所以，包運喬恩的解決方案：

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.onKeyDown.add(function(ed, evt) { 
      if (evt.keyCode == 9){ 
      ed.execCommand('mceInsertContent', false, '&emsp;&emsp;'); 
      evt.preventDefault(); 
      } 
     }); 
    } 
});

來源

2013-10-31 15:26:41 Mac

對於微小的MCE編輯器的新版本以下解決方案爲我工作：

setup: function(ed) { 
    ed.on('keydown', function(event) { 
     if (event.keyCode == 9) { // tab pressed 
      if (event.shiftKey) { 
      ed.execCommand('Outdent'); 
      } 
      else { 
      ed.execCommand('Indent'); 
      } 

      event.preventDefault(); 
      return false; 
     } 
    }); 
}

來源

2013-11-20 09:35:42

這些問題的答案在這裏給出的也不太因爲我需要在一行中間縮進文本。我列出了辦公室分支的名稱，並希望他們的電話號碼一致。每個辦公室名稱的長度都不相同，我嘗試了@ Mac的答案和空格的組合，但我無法準確獲得它的準確性，所以我使用Shift鍵和空格鍵添加了一個小空間選項，這使得我可以完美地排列所有內容。唯一的缺點是tinymce的默認實體不包含＆hairsp;所以我不得不將默認實體列表添加到我的設置中，並在末尾添加「8202，頭髮」。

tinyMCE.init({ 
    ... 
    setup : function(ed) { 
     ed.on('keydown', function(event) { 
     if (event.keyCode == 9) { // tab pressed 
      ed.execCommand('mceInsertContent', false, '&emsp;&emsp;'); // inserts tab 
      event.preventDefault(); 
      return false; 
     } 
     if (event.keyCode == 32) { 
      if (event.shiftKey) { 
       ed.execCommand('mceInsertContent', false, '&hairsp;'); // inserts small space 
       event.preventDefault(); 
       return false; 
      } 
     } 
     }); 
    } 
});

來源

2014-11-07 13:16:36

它可以通過在TinyMCE的不間斷可用的插件來完成

tinymce.init({ 
    selector: "textarea", // change this value according to your HTML 
    plugins: "nonbreaking", 
    mewnubar: "insert", 
    toolbar: "nonbreaking", 
    nonbreaking_force_tab: true 
});

細節可以https://www.tinymce.com/docs/plugins/nonbreaking/

來源

2016-11-30 12:00:22 zahid9i

找到您可以輕鬆地使用下面的代碼添加標籤空間

ed.on('keydown',function(evt){ 
      if (evt.keyCode==9) { 
       ed.execCommand('mceInsertContent', false, '<span class="mce-nbsp">&emsp;&emsp;&emsp;&emsp;</span>'); 
       tinymce.dom.Event.cancel(evt); 
       return; 
      } 
    });

來源

2017-01-19 07:43:08

微小的MCE：如何讓人縮進

回答

相關問題