CODEWITHSUNDEEP
javascriptckeditor
Hearner
Hearner

Reputation: 2729

Change height for only one textarea using ckeditor

I get 3 ckeditor textareas in one page. The problem is that I want one of the textarea to be the same size than twice the others. I can't find how to resize ONLY ONE textarea. 

<script type="text/javascript">
        CKEDITOR.config.height='600px';
</script>

Works fine but it changes all the textareas. I also tried 

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

But this doesn't work... I tried to change my config.js file but still nothing. If i put in my config.js 

CKEDITOR.editorConfig = function( config ) {

        config.width = '1000px';
        config.height = '700px'; 
};

It doesn't work.

To summarize: How can i resize a textarea using its ID ??

Upvotes: 7

Views: 23216

Answers (3)

maulvieyazid
maulvieyazid

Reputation: 1

for those using CKEditor 5

it has been answered in their FAQ

The height of the editing area can be easily controlled with CSS.

.ck.ck-content:not(.ck-comment__input *) {
   height: 300px;
   overflow-y: auto;
}

Edit: you can use min-height if you don't want the height to be fixed, and your content hidden

The height of the editing area can be easily controlled with CSS.

.ck.ck-content:not(.ck-comment__input *) {
   min-height: 300px;
   overflow-y: auto;
}

Upvotes: 0

Penny Liu
Penny Liu

Reputation: 17418

Used CSS to change height on the editor:

.ck-editor__editable {
  min-height: 200px;
}

Here is one more example (based on CKEditor5):

let theEditor;

ClassicEditor
  .create(document.querySelector('#editor'), {

    toolbar: ['heading', '|', 'bold', 'italic', 'link', 'bulletedList', 'numberedList', 'blockQuote']
  })
  .then(editor => {
    theEditor = editor;

  })
  .catch(error => {
    console.error(error);
  });


function getDataFromTheEditor() {
  return theEditor.getData();
}

document.getElementById('getdata').addEventListener('click', () => {
  alert(getDataFromTheEditor());
});
.ck-editor__editable {
  min-height: 200px;
}
<script src="https://cdn.ckeditor.com/ckeditor5/10.0.1/classic/ckeditor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="content" id="editor">
<p>Here goes the initial content of the editor.</p>
</textarea>
<button id="getdata">Print data</button>

Upvotes: 7

Anna Tomanek
Anna Tomanek

Reputation: 2239

This should work for the a <textarea id="Resolution">:

    <script>
    CKEDITOR.replace( 'Resolution', {
        height: 400
    } );
    </script>

Remember to clear your browser cache after changing the configuration!

Note that config.height accepts an integer to denote a value in pixels or a CSS value with a unit.

See also the Setting Editor Size sample in CKEditor SDK and the relevant documentation.

Upvotes: 8

Related Questions