tinyMCE - Ich muss die Breite/Höhe des eingegebenen Textes begrenzen

Question

Ich habe eine tinyMCE Textarea, in der ich begrenzen möchte, wie groß, in Pixeln, was auch immer der Benutzer eingibt. Tue ich wirklich. Ich weiß, dass die meisten Nutzer tinyMCE nicht verwenden, aber wir erlauben unseren Kunden, ihren eigenen Anzeigentext für eine Anzeige mit einer bestimmten Größe (407 x 670 Pixel) einzugeben und zu formatieren. Also möchte ich einschränken, was sie in diese bestimmte Größe eingeben können. Ich kann die Anzahl der Zeichen nicht begrenzen, da dies je nach Schriftart/Schriftgröße variieren würde. Ich möchte eigentlich, dass die Eingabe in eine bestimmte Größe passt.

Ich habe den Editor-Bereich erfolgreich skaliert und die Größenanpassung des Editors und der Bildlaufleisten ausgeschaltet (in Firefox sowieso), aber der Benutzer kann weiterhin über die Ränder der Box hinaus tippen. Gibt es eine Möglichkeit, dies zu verbieten?

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

Vielen Dank für Ihre Aufmerksamkeit, ich habe für STUNDEN mit diesem gerungen!

Answer 1

Es ist eine komplizierte, soweit ich weiß, gibt es keine Funktion von der TinyMCE Api, dies zu tun. Sie könnten versuchen, den von TineMCE erstellten iFrame zu konfigurieren.

Von:

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

Answer 2

Sieht aus wie Sie an own plugin dafür schreiben haben. Ich werde Ihnen die dafür notwendigen Schritte zeigen.

1. Hier ist ein Tutorial zum Schreiben an own plugin, das ist nicht schwer.
2. Sie müssen für jede der Benutzer Aktionen (keyup, einfügen, usw.) für den Editor Inhalt Höhe prüfen. Verwenden Sie hierfür die vordefinierten ynymce Event-Handler. Wenn die Größe von 670 Pixeln kleiner als die reale Größe ist, werden Sie to undo die letzte Aktion des Benutzers automatisch die folgende Zeile verwenden, haben tinymce.get('my_editor_id').undoManager.undo();

Answer 3

ich anhand meiner Lösung auf Thariama Idee mit Undo (THX).

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. Funktioniert unter keyDown und paste. Getestet nur in FF 12 und Chrome.