tinyMCE - I need to limit width/height of text entered - tinymce

Question

I have a tinyMCE textarea in which I want to limit how large, in pixels, whatever the user enters. Really, I do. I know this is not how most people use tinyMCE, but we are allowing clients to enter and format their own ad text for an ad that is a specific size (407px by 670px). So I want to limit what they can enter to that particular size. I can't limit the number of characters, because that would vary depending on font style/size. I actually want the input to fit within a particular sized box.
I have successfully sized the editor area and turned off the resizing of the editor and the scrollbars (in Firefox anyway), but it will still let the user continue typing past the edges of the box. Is there ANY way to prohibit this?
http://www.retailpromoinc.com/RestaurantAdvertising.php
Thank you for your consideration, I have been wrestling with this for HOURS!

Answer 1

Its a complicated one, as far as i know is there no feature from the TinyMCE Api to do so. What you could try to do is to configure the iFrame that is created by TineMCE.
By:
function iFrameConfig() {
var iFrame = document.getElementById('textareaid_ifr');
iFrame.setAttribute('scrolling', 'no');
iFrame.style.width = '300px';
iFrame.style.height = '600px';
}

Answer 2

Looks like you will have to write an own plugin for this. I will show you the steps necessary for this.
Here is a tutorial on howto write an own plugin, this is not difficult.
You will have to check for the editor content heigth for each of the users actions (keyup, paste, aso.). Use the predefined tinymce event handlers for this.
If the size of 670px is smaller than the real size you will have to undo the last user action automatically using the following line tinymce.get('my_editor_id').undoManager.undo();

Answer 3

I based my solution on Thariama's idea with 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. Works on keyDown and paste. Tested only in FF 12 and Chrome.