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

问题

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?

回答1:

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;
}

回答2:

TinyMCE or ck editor should meet your needs.

Regarding the scroll issue, try using jquery and the keypress event along to test the length of the content in the div holding the editor. You could also combine this with a character counter on the screen to dynamically display how many characters a user has left.

charCount = $(this).val().length;

来源：https://stackoverflow.com/questions/7616319/a-wysiwyg-where-its-possible-to-limit-the-text-height

标签

editor

wysiwyg