show tinymce contents in a div with flexible though maximum height
When using an editor like tinymce, how could i limit the height of the text a user enters so it doesn't use more space on the webpage than i want it to?
There are 2 things that i want some advise on:
In the editor: The user enters text in a tinymce editor, he could set a text to font-size say 80px which would use up more space than a normal letter. So it's not the amount of text that i care about it's the height of the total.
In the webpage: I don't want to give them more than say 200px worth of text on the page. But if they enter just 1 line of text with a small font-size i don't want to 开发者_高级运维show a 200px space. So the height has to be flexible but with a maximum.
I know this isn't exact science but the goal here is to prevent the user from messing up the page.
To solve a similar issue i wrote the following function (placed inside an own tinymce plugin). You will need to add a variable for the maximum case and maybe tweak it a bit, but i hope this code will put you into the right direction
// this function will adjust the editors iframe height to fit in the editors content perfectly
resizeIframe: function(editor) {
var frameid = frameid ? frameid :editor.id+'_ifr';
var currentfr=document.getElementById(frameid);
if (currentfr && !window.opera){
currentfr.style.display="block";
if (currentfr.contentDocument && currentfr.contentDocument.body.offsetHeight) { //ns6 syntax
currentfr.height = currentfr.contentDocument.body.offsetHeight + 26;
}
else if (currentfr.Document && currentfr.Document.body.scrollHeight) { //ie5+ syntax
currentfr.height = currentfr.Document.body.scrollHeight;
}
styles = currentfr.getAttribute('style').split(';');
for (var i=0; i<styles.length; i++) {
if ( styles[i].search('height:') ==1 ){
styles.splice(i,1);
break;
}
};
currentfr.setAttribute('style', styles.join(';'));
}
},
精彩评论