How to change the editor size of CKEditor?

问题

Since it is a textarea , I tried cols="50" in html attribute but it does not work.

Also , I found the answer from the previous question . He said I can do this by adding. CKEDITOR.instances.myinstance.resize(1000, 900); However , the size still has not changed.

Here is the code I attempted, thank you.

Updated

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <script src="../plugin/jquery-1.6.1.min.js"></script>
    <script src="../plugin/jquery.validate.min.js"></script>
    <script type="text/javascript" src="../plugin/ckeditor/ckeditor.js"></script>

    <script>
$(document).ready(function(){   
$("#addlist").validate();
var editor = CKEDITOR.replace('editor1');
var div = document.getElementById('editor');
editor.resize($(div).width(),'900');
}); 
    </script>
</head>
<body>
    <form method="post" action="confirm.php">
        <p><br />
        <div id="editor">
            <textarea id="editor1" name="editor1">
            </div>
            <? if (isset($_GET['file']))
            {$filepath=$_GET['file']; 
                require_once("../template/".$filepath);}?> </textarea>
        </p>
        </br>
            File Name </br>
            <b>(Naming Without .html e.g. MyTemplate1) :</b>
            </br>
            <input id="tname" name="tname" class="required" />

            <input type="submit" />

        </p>
    </form>
</body>
</html>

回答1:

try following

To achieve this, use the resize function to define the dimensions of the editor interface, assigning the window a width and height value in pixels or CSS-accepted units.

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

While setting the height value, use the isContentHeight parameter to decide whether the value applies to the whole editor interface or just the editing area.

// 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:

For CKEditor 4.0, I had to use:

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

回答3:

Just go to ckeditor folder and find config.js

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

};

This will resize your ckeditor based on screen size.

回答4:

//This would help.It just works for me.

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

            });

</script>

回答5:

Here's a jQuery function that uses the cols= attribute to resize the ckeditor height (scalar of 20px per row)

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

then your html like this will automatically resize

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

回答6:

I used this solution (CKeditor4):

.cke_contents { height: 100% !important; }

source

Hope it helps :)

回答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:

in ckeditor version 4.5.5

can force change height by use

CKEDITOR.config.height = '800px';

回答9:

I struggled to use resize method in version 4.3.4.

I did a hack and used below css :-

.cke_reset {width:807px !important; }

Worked like a charm!

回答10:

Use config for updating the styles

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:

As stated in other answers the resize() function is what must be used. For those who are wondering how this code can be used editor.resize( '100%', '350' ) see below.

Suppose you create an editor for a textarea with name attribute test. Then you can call the resize() function on the instance of the CKEditor like this:

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

回答13:

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

回答14:

Answering this because it took me forever to figure out how to solve this using jquery. This is similar to some answers above, but contains the instance creation to be thorough.

In my opinion, this is not elegant, and I have no idea why CKeditor doesn't inherent it's size from it's parent container, which would be much more desirable.

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

This should work for class selectors, not just by ID.

回答15:

To set height of the CKEditor at the time of initialization you can follow the listed procedure.

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

回答16:

Using jQuery ckeditor, the only way it would finally listen to me was using a bit of a hack:

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

回答17:

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

回答18:

This one is perfectly worked.

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

回答19:

If you need 100% height for your editor;

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

回答20:

First, define text area.

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

and then in script tag initialize ck editor.

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

来源：https://stackoverflow.com/questions/9990157/how-to-change-the-editor-size-of-ckeditor

标签

javascript

jquery

html

ckeditor