How to resize ckeditor size on the fly

Hi all,

I ve checked the document, but I dont know how to use the following command in an html file.

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

I had set an textarea with class ckeditor, and a <script type="text/javascript" src="ckeditor/ckeditor.js"></script> in the head wihtin an html file.

Can anyone show an example about where and how to put the editor.resize code in the html?

Many thanks

Tue, 10/22/2013 - 22:10

mvk

Joined: 22/10/2013

Posts: 6

Hi forpizinmind

do you actually need to resize the editor after it has been created? If not, you can simply configure the default size, for example in the config.js file by adding the following entries:

  config.width = 500;
  config.height = 700;

However, if you need to change the size anytime after the editor has been created, you can use the resize() method which you can call actually anywhere in the HTML file as long as you make sure that it's not executed until the editor has been fully initialized. For example:

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Sample</title>
    <script src="ckeditor/ckeditor.js"></script>
</head>
<body>
    <form method="post">
        <p>
            My Editor:<br>
            <textarea name="editor1">&lt;p&gt;Initial value.&lt;/p&gt;</textarea>
            <script>
                CKEDITOR.replace( 'editor1' );             
                // resize the editor after it has been fully initialized
                CKEDITOR.on('instanceLoaded', function(e) {e.editor.resize(700, 350)} );
            </script>
        </p>
        <p>
            <input type="submit">
        </p>
    </form>
    
</body>
</html>

HTH

Fri, 11/01/2013 - 12:05

barabere

Joined: 01/11/2013

Posts: 1

How to resize ckeditor size on the fly

Hi forpizinmind

gread