A WYSIWYG Where it's possible to limit the text/height

Question

Ok, so I tried out tinyMCE.

After no luck and a lot of research on how to limit the editors content, I'm looking for other alternatives.

These are the needs for the WYSIWYG:

Able to have these function/buttons: bold,italic,underline,bull list, table controls
Able to limit the input. If I set the editor to 300 width x 500 height, and you type more than the height, it should NOT apply a scroller and you should be unable to write more.
Able to set multiple editors in one page

Which WYSIWYG editor can fill my needs?

It's possible that the answer is "none" - this is not trivial. The WYSIWYG editor would have to check with every keypress event whether the planned change to the content would exceed the defined height, and block it if it does. It's well possible such a solution doesn't exist, and would need to be built (with a lot of effort) — Pekka
@Pekka i tried to built what you mention here: stackoverflow.com/questions/7609104/… , but it didnt work well. Hmm.. what can i do? I would like to have WYSIWYG on my site, and the output box where the content of the editor appears has fixed height+width, so i need to do the same with the editor so you cant enter more than the height can 'hold'.. Help :( — Karem

Javaguru Javaguru · Accepted Answer · 2011-10-01T09:54:37

A simple approach would be to use a div element and put the content of the editor inside that div. The div should have set a width (using css).

<div class="calculation_preview"></div>

And the css should be something like:

div.calculation_preview {
   width: 200px;
   visibility: hidden;
   position: absolute;
   top: 0px;
   left:0px;
}

After each key-stroke, you can measure the height of the div (using the function offsetHeight on the div). If it is too height, remove the last character the user entered.

To restore the previous content, you can declare a javascript variable as for example:

var savedContent = "";

If you have some initial content in your editor, then you should initialize the variable with that content. For each key-stroke, you do the following:

// Get current editor content:
var content = tinyMCE.activeEditor.getContent({format : 'raw'});
// Measure the new height of the content:
var measurer = document.getElementById("calculation_preview");
measurer.innerHTML = content;
if(measurer.offsetHeight > 100) {
   // Content is too big.. restore previous:
   tinyMCE.activeEditor.setContent(savedContent, {format : 'raw'});
} else {
   // Content height is ok .. save to variable:
   savedContent = content;
}

A WYSIWYG Where it's possible to limit the text/height

2 Answers