4

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?

qadenza
  • 9,025
  • 18
  • 73
  • 126

1 Answers1

9

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.

Community
  • 1
  • 1
Wiktor Bednarz
  • 1,553
  • 10
  • 15
  • Thanks a lot. It is tinyMCE and autoresize works now. But still I have a white empty space at the bottom of content, about 120px height. Is there a way to avoid it ? – qadenza Jan 16 '17 at 09:17
  • 1
    Yes, the option you're looking for is `autoresize_bottom_margin`. Everything is explained in the [documentation](https://www.tinymce.com/docs/plugins/autoresize/), including examples. – Wiktor Bednarz Jan 16 '17 at 20:19