tinyMCE textarea auto height

Question

tinyMCE textareaの高さを変更して、テキストエリア自体をスクロールするのではなく、メインページをスクロールせずにすべてのコンテンツを表示するようにします。

テキストエリアの内容は動的に変更されるため、高さを自動調整する必要があります。

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

テキストエリアには、下部に空白の多くで、今そのコンテンツの二倍背が高いです。

私は他の投稿から多くのコードを試しましたが、成功しませんでした。

助けが必要ですか？

Answer 1

私は混乱しています。あなたはCKEditorについて尋ねましたが、あなたのコードはTinyMCEを使用していることを示唆しています。それらは完全に異なるエディタですが、どちらも自動高さ調整をサポートしています。 CKEditorバージョンについては

CKEditorバージョン

あなたはautogrowプラグインをロードする必要があります。あなたは上記のスニペットを実行するには問題がある場合は、this fiddleをチェックアウトすることができます公式documentation

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

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

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

でより多くを学ぶことができます。 TinyMCEのために

TinyMCEの

あなたはautoresizeプラグインをロードする必要があります。あなたは上記のスニペットを実行するには問題がある場合は、this fiddleをチェックアウトすることができます公式documentation

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

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

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

でより多くを学ぶことができます。