1
1

以前、Summernoteのツールバーのカスタマイズ記事を投稿した際に、ついでにSummernoteのエディタエリアの高さ設定をメモしましたが、ついでにその他の高さ設定をメモ。

以前の記事はこちら

以前の記事で

$('#hoge').summernote({
	lang: 'ja-JP',
    height: 400
});

このようにheight: 400と記述することで初期表示が400pxの高さで表示されることを説明しました。
この場合はエディタの記入が長くなっても高さ400pxから自動では変わらず、スクロールするかエディタ下部のつまみをドラッグしてエディタの高さを広げたりするかしかできません。

例えば、初期表示はある程度の高さで表示して、記入がエディタエリアを超えると自動的にエディタの高さが広がっていくようにすることもできます。
その場合は

$('#hoge').summernote({
	lang: 'ja-JP',
    minHeight: 400
});

とすることで、初期表示は高さ400px、記入が長くなり400pxを超えると自動でエディタエリアが広がっていきます。

逆に高さの制限を設けて、指定サイズを超えないようにしたい場合は

$('#hoge').summernote({
	lang: 'ja-JP',
    minHeight: 400,
    maxHeight: 800
});

とすることで400pxを超えると自動でエディタエリアが広がり、800pxに達するとそれ以上エディタエリアが広がらなくなります。

念のためのメモでした。

1
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
1