показывать содержимое в виде div с гибкой, хотя и максимальной высотой

Question

При использовании редактора, такого как tinymce, как я могу ограничить высоту текста, вводимого пользователем, чтобы он не занимал больше места на веб-странице, чем я хочу?

Есть 2 вещи, которыеЯ хочу посоветовать:

В редакторе: Пользователь вводит текст в редакторе tinymce, он может установить размер шрифта, скажем, 80px, который будет занимать больше места, чемнормальное письмо.Так что мне важен не объем текста, а его высота.

На веб-странице: Я не хочу давать им больше, чем, скажем, текст в 200px настраница.Но если они вводят только 1 строку текста с небольшим размером шрифта, я не хочу показывать пробел в 200 пикселей.Так что высота должна быть гибкой, но с максимумом.

Я знаю, что это не точная наука, но цель здесь состоит в том, чтобы не дать пользователю испортить страницу.

Answer 1

Чтобы решить аналогичную проблему, я написал следующую функцию (помещён в собственный плагин tinymce).Вам нужно будет добавить переменную для максимального случая и, возможно, немного подправить ее, но я надеюсь, что этот код направит вас в правильном направлении

    // 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(';'));
        }
    },