Изменение высоты содержимого в зависимости от высоты верха и низа

Я могу достаточно легко изменить высоту области содержимого CKEditor, используя

config.height = 400;
config.autoGrow_minHeight = 200;

и подобные.

Однако у меня возникли проблемы с тем, чтобы дизайн реагировал на изменение высоты верхней панели при изменении размера окна. Вся документация, которую я видел до сих пор, по-видимому, влияет на высоту одной области содержимого, а не всего CKEditor (то есть: верхней панели, области содержимого и нижней панели).

Я попытался получить доступ к высоте верхнего диапазона с идентификатором cke_1_top как с jQuery, так и с простым JS, а затем установить область содержимого как требуемую общую высоту за вычетом высоты верха и высоты дна. Однако я не могу выбрать его ни с тем, ни с другим.

Есть ли способ установить высоту всей области или получить высоту сверху и снизу, чтобы я мог использовать их для расчета высоты содержимого?

ИЗМЕНИТЬ 0:

Надеюсь, это имеет больше смысла, чем то, что я изначально написал.

Вот общий план того, что я думаю о соответствующем разделе моего кода:

<div id="cke_rawText">
    <span id="cke_rawText-arialbl"></span>
    <div class="cke_inner cke_reset">
        <span id="cke_1_top"></span>
        <div id="cke_1_contents"></div>
        <span id="cke_1_bottom"></span>
    </div>
</div>

Я могу изменить высоту cke_1_contents примерно так: config.height = 400. Я хотел бы, чтобы вся область оставалась постоянной высоты, и по мере сужения окна верхняя панель становится выше, поскольку значки помещаются в новые строки. Текстовая область остается неизменной, а это означает, что весь редактор занимает больше места на странице по вертикали.

Моя идея заключалась в том, чтобы получить высоту cke_1_top и cke_1_bottom и вычесть их из высоты cke_inner, что, в свою очередь, должно заполнить все cke_rawText. Однако я не смог выбрать эти элементы. Я пытался использовать чистый JS, jQuery и метод getById CKEditor (http://docs.ckeditor.com/#!/api/CKEDITOR.dom.document). Я получаю null, что означает, что он не находит мой элемент.

Глядя на пример Louys Patrice Bessette, я не могу сделать что-то вроде: $("#CKform").css({"top":"30%"});, так как я не могу выбрать html элементы.

Я могу изменить высоту в моем файле css, но я не могу сделать это динамически с помощью JS, поскольку я не могу выбирать элементы CKEditor. Возможно, тогда моя проблема больше связана с JS, чем с CKEditor.

ИЗМЕНИТЬ 1:

Думаю, я понял это. Поскольку HTML-код CKEditor генерируется динамически, мне нужно использовать делегирование событий в jQuery. Если у кого-то еще есть такая же проблема, я нашел этот пост полезным.

РЕДАКТИРОВАТЬ 2:

Кажется, это работает:

$(window).resize (function(event) {
    event.preventDefault();
    var i = parseInt($('.cke_inner').css("height"));
    var t = parseInt($('#cke_1_top').css("height")) + 9;
    var b = parseInt($('#cke_1_bottom').css("height")) + 9;
    var m = i - t - b;
    $('#cke_1_contents').css({"height" : m});
});

Я не уверен на 100%, зачем нужны 9, но значение, которое возвращает .css, отличается именно на эту величину по сравнению с высотой, которую я нашел, проверив элементы.


javascript jquery css ckeditor ckeditor4.x
person 31rhcp    schedule 17.06.2016    source источник
comment
Я решил свою первоначальную проблему, но теперь мне интересно, как мне получить доступ к динамически добавляемым элементам DOM без привязки к событию, такому как щелчок или изменение размера. Я пробовал код, аналогичный приведенному выше, используя загрузку и готовность, но, похоже, ни один из них не работает.   -  person 31rhcp    schedule 18.06.2016

Ответы (2)


arrow_upward
0
arrow_downward

Я снова полностью стер свой предыдущий ответ.

Вы хотите расширить редактируемую зону пропорционально изменению размера окна с отрицательной шириной.
.oO(Надеюсь, на этот раз я ясно понял вопрос!!!)

Хорошо.

Попробуйте этот код (который находится в этой новой Fiddle):

// Replace the <textarea id="editor1"> with a CKEditor
// instance, using default configuration.
CKEDITOR.replace( 'editor1', {
    height : 200,
    autoGrow_minHeight : 200,
    on:{
        resize: function(){
            $("#msg").html("CKEditor resized!");
            $("#2nd").html("This is a different event!");
        }
    }
});

var cke_1_top_Width_memory;

window.onresize = function(e) {

    $("#msg").html("Window resized!");
    cke_1_top_Width = $(document).find("#cke_1_top").css("width");

    console.log("");
    console.log("onresize fct begin, cke_1_top_Width_memory: "+cke_1_top_Width_memory);     // undefined on the first pass.

    // If previous value is different, change the CKE editable zone height
    if(cke_1_top_Width!=cke_1_top_Width_memory){

        console.log("CKE Height is changing!");

        // Calculate difference between the 2 values
        diff=parseInt(cke_1_top_Width_memory)-parseInt(cke_1_top_Width);

        cke_1_contents = parseInt($(document).find("#cke_1_contents").css("height"));
        console.log("cke_1_contents height: "+cke_1_contents+"px");

        New_cke_1_contents = cke_1_contents+((diff*16)/4)+"px";     // assuming 16 px is something like on line... For each 4 px lost on width.
        // To ensure a minimal height
        if(New_cke_1_contents<"200px"){
            New_cke_1_contents="200px";
        }

        $(document).find("#cke_1_contents").css({"height":New_cke_1_contents});

        after = $(document).find("#cke_1_contents").css("height");
        console.log("cke_1_contents height - after: : "+after);
    }

    // update mem
    cke_1_top_Width_memory = cke_1_top_Width;

    console.log("onresize fct end, cke_1_top_Width_memory: "+cke_1_top_Width);

    //$("#CKform").css({"top":"30%"});
    $("#2nd").html("Also try to resize CKEditor by dragging it's bottom-right corner");
};

СЕЙЧАС, с этим кодом, я думаю, вы должны быть на правильном пути, чтобы делать то, что вы хотите.
Это не идеально...

Для исторического обзора:
Мой первый jsFiddle

person Louys Patrice Bessette    schedule 17.06.2016
comment
К сожалению, похоже, это не работает. Область содержимого остается одного размера независимо от того, чему равно config.height. Даже если бы он обновлялся, не нужно ли было бы также изменять значения в зависимости от высоты вершины (чего я не могу сделать программно)? - person 31rhcp; 18.06.2016
comment
Я только что стер свой первый ответ на новый. Это было не так просто найти в документе CKE. ;) - person Louys Patrice Bessette; 18.06.2016
comment
Спасибо за публикацию, но я думаю, что я был немного неясен в своем первоначальном сообщении. Я хочу динамически изменять высоту текстовой области по мере изменения размера окна, сохраняя при этом всю высоту CKEditor постоянной. Смотрите мое редактирование для получения дополнительной информации. - person 31rhcp; 18.06.2016
comment
Обновлено снова... Посмотрите. ;) - person Louys Patrice Bessette; 18.06.2016
comment
Думаю, я понял. Спасибо за помощь :) - person 31rhcp; 18.06.2016
comment
Я предлагаю вам опубликовать свое решение в качестве ответа ... Я думаю, вы можете его принять! (смеется) Если оно так отличается от моего ответа. Будущие читатели этого вопроса будут скорее «зеленым магнитом», чем деталями обсуждения. ;) Я проголосую. - person Louys Patrice Bessette; 18.06.2016

arrow_upward
0
arrow_downward

Вот что я сделал, чтобы весь CKEditor оставался постоянной высоты:

$(window).resize (function(event) {
    event.preventDefault();
    var i = parseInt($('.cke_inner').css("height"));
    var t = parseInt($('#cke_1_top').css("height")) + 9;
    var b = parseInt($('#cke_1_bottom').css("height")) + 9;
    var m = i - t - b;
    $('#cke_1_contents').css({"height" : m});
});

Так как HTML для CKEditor генерируется динамически, использование делегирования событий в jQuery требуется для доступа к генерируемым элементам DOM.

Я не уверен на 100%, зачем нужны 9, но значение, которое возвращает .css, отличается именно на эту величину по сравнению с высотой, которую я нашел, проверив элементы.

person 31rhcp    schedule 18.06.2016