Change height for only one textarea using ckeditor

Question

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 ??

Answer 1

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.

• Hearner: Thanks,it worked right after clearing the browser cache. I think the problem was caused by the cache. Thank you !
• Anna Tomanek: You're welcome - it happens all the time, believe me. Glad to see you sorted it out!

Answer 2

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>

Answer 3

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