tinyMCE textarea auto height

Question

I want to change height of tinyMCE textarea so all content will be visible without scrolling the textarea itself, but scrolling the main page.

Content of textarea is dinamically changed, so its height should be autoadjusted.

<script>
    tinymce.init({
        selector: "textarea",
        plugins: ["code fullscreen"],
        toolbar: "bold italic | alignleft aligncenter alignright alignjustify"
    });
</script>

html

<form id='form1' action='?' method='post'>
    <input type='text' name='title' value='<?php echo $row['title'];?>'><br>
    <textarea name='content' ><?php echo $row['content'];?></textarea>
</form>  

js

$('textarea').each(function() {
    $(this).height($(this).prop('scrollHeight'));
});

Text area is now twice tall as its content, with a lot of blank space at the bottom.

I tried a lot of code from other posts, without success.

Any help?

Answer 1

I'm confused. You asked about CKEditor, however your code suggest you're using TinyMCE. They're completely different editors, although they both support automatic height adjustment.

CKEditor

For CKEditor you need to load autogrow plugin. You can learn more in the official documentation

CKEDITOR.replace('editor', {
  extraPlugins: 'autogrow'
});

<script src="https://cdn.ckeditor.com/4.6.2/standard-all/ckeditor.js"></script>

<textarea id="editor"></textarea>

You can check out this fiddle if the snippet above have trouble to run.

TinyMCE

For TinyMCE you need to load autoresize plugin. You can learn more in the official documentation

tinymce.init({
  selector: '#editor',
  plugins: ['autoresize']
});

<script src="https://cdn.tinymce.com/4/tinymce.min.js"></script>

<textarea id="editor"></textarea>

You can check out this fiddle if the snippet above have trouble to run.