投稿日：
2021年6月21日
最終更新日：
【おすすめWYSIWYGエディター】Bootstrapベースの「Summernote」でフォームパーツをツールバー付きのリッチなUIにしてみた【無料で爆速】
YouTubeも見てね♪
【最新機種】GoPro hero11 Black
最新機種でVlogの思い出を撮影しよう！
ペヤング ソースやきそば 120g×18個
とりあえず保存食として買っておけば間違いなし！
ドラゴンクエスト メタリックモンスターズギャラリー メタルキング
みんな大好き経験値の塊をデスクに常備しておこう！
Bauhutte ( バウヒュッテ ) 昇降式 L字デスク ブラック BHD-670H-BK
メインデスクの横に置くのにぴったりなおしゃれな可動式ラック！
BANDAI SPIRITS ULTIMAGEAR 遊戯王 千年パズル 1/1スケール
もう一人の僕を呼び覚ませ！！
MOFT X 【新型 ミニマム版】 iPhone対応 スマホスタンド
Amazon一番人気のスマホスタンド！カード類も収納出来てかさ張らないのでオススメです！
サンディスク microSD 128GB
スマホからSwitchまで使える大容量MicroSDカード！
導入が楽チンでFormをWYSIWYG化
先日、フォームのテキストボックスやインプットボックスをリッチなUIにして欲しいというお話を受けました。
おそらくエクセルやワードのようなツールバーが付いているWYSIWYGエディターの事を指しているようだったので、ライブラリ選定をしていたところ、無料で使いやすそうなやつを見つけたので今回はそちらの導入方法を備忘録として記事にしてみようと思います。
Super Simple WYSIWYG Editor on Bootstrap Summernote is a JavaScript library that helps you create WYSIWYG editors online.
Summernote – Super Simple WYSIWYG editor
手順
導入
まずはライブラリを用意しましょう。
ソースセットをGithubからダウンロードしてプロジェクトに取り込んでも良いし、CDNで読み込んでも良いです。
今回はサクッとCDNで読み込んでみます。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- include libraries(jQuery, bootstrap) -->
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<!-- include summernote css/js -->
<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
略...
</html>
|
Summernoteと合わせてBootstrap３のライブラリもCDN経由で読み込んでいます。
次にSummernoteによってWYSIWYG化するパーツを用意しましょう。
今回はinput[type='text']とtextareaに加え、divもWYSIWYG化出来るようなのでそちらを試してみましょう。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
略...
<body>
<div class="panel panel-default">
<div class="panel-heading">
<h1>サンプル</h1>
</div>
<div class="panel-body">
<form method="post">
<p>inputボックス</p>
<input type="text" />
<input type="text" class="summernote" />
<p>テキストエリア</p>
<textarea ></textarea>
<textarea class="summernote"></textarea>
<p>div</p>
<div></div>
<div class="summernote"></div>
</form>
</div>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('.summernote').summernote();
});
</script>
</body>
</html>
|
最後にsummernoteを実行する事を忘れずに。
確認
ブラウザでアクセスするとこのような形になります。
無事にそれぞれがWYSIWYG化出来ていますね♪
ボタンの種類と有効無効の設定方法
SummernoteのWYSIWYGエディターに用意されているツールは以下の通りです。
- Insert
-
picture: 画像ダイアログ -
link: リンクダイアログ -
video: ビデオダイアログ -
table: テーブル挿入 -
hr: 平行線
-
- Font Style
-
fontname: フォントファミリー -
fontsize: フォントサイズ -
fontsizeunit: フォントサイズユニット -
color: 文字色&背景色r -
forecolor: 文字色 -
backcolor: 背景色 -
bold: 太文字 -
italic: 斜体 -
underline: 下線/li> -
strikethrough: 取り消し線 -
superscript: 上付き文字 -
subscript: 添字 -
clear: スタイルリセット
-
- Paragraph style
-
style: スタイルフォーマット -
ol: ol追加 -
ul: ul追加/li> -
paragraph: 段落はいち -
height: 行高さ
-
- Misc
-
fullscreen: 全画面 -
codeview: コード,HMLトグル -
undo: 戻す -
redo: 進む -
help: ヘルプダイアログ
-
かなり多くの設定が用意されています。
ツールの有効化・無効化については以下のように起動時に指定する事で変える事が出来ます。
|
1
2
3
4
5
6
7
8
9
10
11
|
var option = {
toolbar: [
['style', ['style']],
['font', ['bold', 'underline', 'clear']],
['color', ['color']],
['view', ['fullscreen', 'codeview', 'help']],
]
};
$(document).ready(function() {
$('.summernote').summernote(option);
});
|
終わりに
以上のとても簡単にWYSIWYGエディターを導入する事が出来ました。
他にも細かいカスタマイズが用意されているので、気になる方は公式ドキュメントを見ていただければなと思います♪