Как изменить размер редактора CKEditor?

Ответ 1

попробуйте выполнить

Чтобы достичь этого, используйте функцию resize, чтобы определить размеры интерфейса редактора, присвоив окну значение ширины и высоты в пикселях или принятое CSS ед.

// Set editor width to 100% and height to 350px.
editor.resize( '100%', '350' )

При установке значения высоты используйте параметр isContentHeight, чтобы определить, применимо ли это значение ко всему интерфейсу редактора или только к области редактирования.

// The height value now applies to the editing area.
editor.resize( '100%', '350', true )

http://docs.cksource.com/CKEditor_3.x/Howto/Editor_Size_On_The_Fly

Ответ 2

Просто перейдите в папку ckeditor и найдите config.js

    CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = 'fr';
    // config.uiColor = '#AADC6E';
     config.height = '80vh';

};

Это изменит размер вашего ckeditor на основе размера экрана.

Ответ 3

Для CKEditor 4.0 мне пришлось использовать:

  CKEDITOR.replace('body', {height: 500});

Ответ 4

//Это поможет. Это просто работает для меня.

<script>
            CKEDITOR.replace( 'editor1', {
                uiColor: '#14B8C4',
                toolbar: [
                    [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                    [ 'FontSize', 'TextColor', 'BGColor' ]
                ],
                width:['250px']

            });

</script>

Ответ 5

Здесь функция jQuery, использующая атрибут cols = для изменения размера ckeditor (скаляр 20px в строке)

(function($) {
jQuery.fn.cke_resize = function() {
   return this.each(function() {
      var $this = $(this);
      var rows = $this.attr('rows');
      var height = rows * 20;
      $this.next("div.cke").find(".cke_contents").css("height", height);
   });
};
})(jQuery);

CKEDITOR.on( 'instanceReady', function(){
  $("textarea.ckeditor").cke_resize();
})

тогда ваш html, как это, автоматически изменит размер

<textarea name="body" class="ckeditor" rows="10"></textarea>

Ответ 6

Я использовал это решение (CKeditor4):

.cke_contents { height: 100% !important; }

источник

Надеюсь, это поможет:)

Ответ 7

Yes this worked perfectly We have to use config to override the styles



    <textarea  rows="1000" id="editor1" name="newsletter"></textarea>
    <script>
    CKEDITOR.replace('editor1');
    CKEDITOR.config.width="100%";
    CKEDITOR.config.height="700px"
    </script>

Ответ 8

в версии cceditor 4.5.5

может заставить изменить высоту с помощью

CKEDITOR.config.height = '800px';

Ответ 9

Я изо всех сил пытался использовать метод изменения размера в версии 4.3.4.

Я сделал взлом и использовал ниже css: -

.cke_reset {width:807px !important; }

Работал как шарм!

Ответ 10

Используйте config для обновления стилей

editor.config.width="100%";
editor.config.height="100px"

Ответ 11

CkEditor For Resize:

CKEDITOR.replace('OnThisDateIwillLook',
{
    toolbar: [['Bold', 'Italic', 'Underline'],],
    skin: 'v2',               
    extraPlugins: 'autogrow',
    autoGrow_minHeight: 250,
    //autoGrow_maxHeight: auto,
});

Ответ 12

Как указано в других ответах, функция resize() - это то, что нужно использовать. Для тех, кто задается вопросом, как этот код можно использовать editor.resize( '100%', '350' ), см. Ниже.

Предположим, вы создали редактор для текстового поля с тегом атрибута атрибута. Затем вы можете вызвать функцию resize() в экземпляре CKEditor следующим образом:

CKEDITOR.instances.test.resize( '100%', '80');

Ответ 13

CKEDITOR.config.width="80%";
CKEDITOR.config.height="500px"

Ответ 14

Отвечая на это, потому что навсегда потребовалось выяснить, как это решить, используя jquery. Это похоже на некоторые ответы выше, но содержит создание экземпляра, чтобы быть тщательным.

По-моему, это не изящно, и я понятия не имею, почему CKeditor не присуще ему размеру от родительского контейнера, что было бы гораздо более желательным.

 var new_editor = $('#selected_textarea').ckeditor(function(){ 
      var set_editor_height = $('#parent_container').height()
      $('.cke_contents').css({ 'height': set_editor_height });
     });

Это должно работать для селекторов классов, а не только по идентификатору.

Ответ 15

Используя jQuery ckeditor, единственный способ, который он, наконец, послушал меня, - это немного взломать:

    $('.ckeditor textarea').ckeditor(function () {
        editor = $('.ckeditor textarea').ckeditorGet();
        $('.cke_inner').css({ 'width': '802px' });
    });

Ответ 16

editor.resize('100%', '350');
editor.resize('550', '350');

Ответ 17

Чтобы установить высоту CKEditor во время инициализации, вы можете следовать приведенной процедуре.

<script>
       CKEDITOR.replace( 'editor1',{
          height:['500px']
       });
</script>

Ответ 18

Это отлично работает.

<script type="text/javascript">
    CKEDITOR.replace('article-ckeditor',
    {
    height: '800px',
    });
</script>

Ответ 19

Если вам нужен 100% рост для вашего редактора;

setInterval(function(){ 
      $('#cke_1_contents').css('height', $('#parent_div_id').outerHeight());
}, 700);

Ответ 20

Сначала определите текстовую область.

<textarea type="text" name="title" id="textEditor" required></textarea>

и затем в теге скрипта инициализируйте редактор ck.

<script type="text/javascript">
    CKEDITOR.replace('textEditor',
    {
       height: '800px'
    });
</script>