2012-03-28 443 views
1

我有一個tinyMCE textarea,我想限制用戶輸入的像素大小。真的,我喜歡。我知道這不是大多數人使用tinyMCE的方式,但我們允許客戶爲特定尺寸的廣告輸入和格式化自己的廣告文字(407px x 670px)。所以我想限制他們可以輸入的尺寸。我無法限制字符的數量,因爲這取決於字體樣式/大小。我實際上希望輸入適合特定大小的盒子。tinyMCE - 我需要限制輸入的文本的寬度/高度

我已成功調整了編輯區的大小,並關閉了編輯器和滾動條的大小調整(Firefox中),但它仍然允許用戶繼續輸入框的邊緣。有沒有辦法禁止這個?

http://www.retailpromoinc.com/RestaurantAdvertising.php

謝謝您的考慮,我一直在冥思苦想好幾個小時了!

回答

0

它是一個複雜的,據我所知TinyMCE Api沒有這樣做的功能。你可以嘗試做的是配置由TineMCE創建的iFrame。

通過:

function iFrameConfig() { 
    var iFrame = document.getElementById('textareaid_ifr'); 
    iFrame.setAttribute('scrolling', 'no'); 
    iFrame.style.width = '300px'; 
    iFrame.style.height = '600px'; 
} 
+0

這不會像user1279447所希望的那樣工作。文字可以輸入,但不會在編輯器內顯示。不過,輸入的內容在編輯器中! – Thariama 2012-03-29 08:18:30

0

看起來你將不得不寫an own plugin這一點。我會告訴你必要的步驟。

  1. 這裏是關於如何寫an own plugin的教程,這並不難。
  2. 你將不得不檢查編輯器內容爲每個用戶動作檢查(keyup,paste,aso。)。爲此,使用預定義的tinymce事件處理程序。 如果670px大小比實際尺寸更小,你將有to undo自動使用tinymce.get('my_editor_id').undoManager.undo();
0

我與基於撤銷(THX)我對Thariama的想法解決以下行的最後一個用戶的操作。

setup : function(ed) { 
    ed.wps = {}; // my namespace container 
    ed.wps.limitMceContent = function(ed) { 
     if ((ed.wps.$textcanvas.height() + ed.wps.textcanvasDummyHeight) > ed.wps.iframeHeight) { 
      ed.undoManager.undo(); 
     } 
    }; 


    ed.onKeyDown.add(ed.wps.limitMceContent); 
    ed.onChange.add(ed.wps.limitMceContent); // change is fired after paste too 

    ed.onInit.add(function(ed) { 
     // cache selectors and dimensions into namespace container 
     ed.wps.$iframe = $("textarea.tinymce").next().find("iframe"); 
     ed.wps.iframeHeight = ed.wps.$iframe.height(); 
     ed.wps.$textcanvas = $(ed.wps.$iframe[0].contentDocument.body); 
     ed.wps.textcanvasDummyHeight = parseInt(ed.wps.$textcanvas.css("marginTop"), 10) + parseInt(ed.wps.$textcanvas.css("marginBottom"), 10); 
    }); 
} 

Working demo。適用於keyDownpaste。僅在FF 12和Chrome上測試。