Summernoteを使ってみたのでメモを残しておく。
Bootstrap5.3で使うためにはスタイルの調整が必要だった。
動作確認環境
- jQuery（3.7.1）
- Bootstrap（5.3.5）
- Summernote（0.9.1）
とりあえず動かしてみた
以下のソースを作成しとりあえず動かしてみたが、Bootstrap5.3とSummernoteの組み合わせて使うと、ポップアップなど一部でレイアウト崩れが発生してしまうようだった。
Bootstrapを5.0.2にすると特にレイアウト崩れは発生しなかったのでSummernote側が最新のBootstrapに追い付いていないと思われる。
試してみたソース
index.html
<!DOCTYPE html>
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Summernote</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.css" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.js" type="text/javascript"></script>
<head>
<body>
<div class="d-flex justify-content-center">
<textarea id="note" class="summernote" style="display:none;" value=""></textarea>
</div>
<script type="text/javascript">
$(function() {
$('#note').summernote({
height: 400,
});
});
</script>
</body>
</html>レイアウト崩れの対処方法
発見次第随時更新していく（対処方法が分かれば．．．）。
症状：ポップアップされる要素がポップアップ表示されない
対処前の表示
対処用CSS
css/summernote-bs5-editor-custom.css
/* popoverの表示位置修正 */
.note-popover {
position: absolute !important;
}
/* popoverの矢印ズレ調整 */
.note-popover > .popover-arrow::before {
top: -7px !important;
}
.note-popover > .popover-arrow::after {
top: -6px !important;
}対処後の表示
症状：ファイルアップロードモーダルのファイル選択がラベルにくっついている
対処前の表示
対処用CSS
css/summernote-bs5-editor-custom.css
/* popoverの表示位置修正 */
.note-popover {
position: absolute !important;
}
/* popoverの矢印ズレ調整 */
.note-popover > .popover-arrow::before {
top: -7px !important;
}
.note-popover > .popover-arrow::after {
top: -6px !important;
}
/* ファイル選択のwidth調整 */
.note-modal .form-control-file {
width: 100%;
}対処後の表示
おまけ：ファイル選択をBootstrapのレイアウトにする
Bootstrap5.3には「form-control-file」というクラスは提供されて無いので、Summernoteロード後に「form-control」に差し替えるJavascriptを追加する。
index.html
<!DOCTYPE html>
<html lang="ja">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Summernote</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.css" type="text/css" />
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.9.1/dist/summernote-bs5.min.js" type="text/javascript"></script>
<head>
<body>
<div class="d-flex justify-content-center">
<textarea id="note" class="summernote" style="display:none;" value=""></textarea>
</div>
<script type="text/javascript">
$(function() {
$('#note').summernote({
height: 400,
});
});
$(function () {
$('#note').summernote({
height: 400,
});
// ファイル選択をBootstrapのレイアウトにする
$('.note-modal .form-control-file').each(function () {
$(this).addClass('form-control').removeClass('form-control-file');
});
});
</script>
</body>
</html>修正後の表示
Bootstrap起因のスタイル微調整
Summernoteを動かしていたところ、Bootstrapのスタイル設定により微妙な表示になってしまっている箇所があったのでスタイルを微調整する。
症状：行間が高すぎる
Summernoteは文字を入力するとpタグで囲まれるが、Bootstrapのpタグのスタイルは下マージンが「1rem」で設定されているため、以下の赤枠のように行間に1文字分の高さが確保されてしまう。
この下マージンは不要なので以下のようにスタイルを追加して下マージンを打ち消す。
app.css
p {
margin-bottom: 0;
}対処後の表示
コメント