【JQuery】オンラインWYSIWYGエディターを実装するなら「summernote（サマーノート）」がベストかも！

2019年9月28日2019年9月29日CSS,Javascript,開発

おはようございます。

今日はまた便利なライブラリを発見したので紹介。

オンライン上でWYSIWYG（リッチテキスト）エディタを簡単に使えるようにするものです。

1. summernote（サマーノート）
2. プログラム
3. 起動してみる
4. まとめ

summernote（サマーノート）

Bootstrapの超シンプルなWYSIWYGエディターSummernoteは、オンラインでWYSIWYGエディターを作成するのに役立つJavaScriptライブラリです。

スマホでも使えるし、文字の装飾やテーブルの挿入、画像、動画のアップロードなどが簡単におこなえます。

また、高機能なのに商用無料で使えるオープンソースなので、個人開発なんかでもガンガン使えそうです。

必要（依存）なライブラリも、JQueryとBootstrapで、summernoteを含むすべてのライブラリが CDNで提供されているので、すぐに使うことができます。

公式サイトはこちら

プログラム

早速試してみました。

css

css/style.css

@charset "UTF-8";

body
{
	font-family:Helvetica, 'Helvetica Neue', 'Mplus 1p', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic' !important;
	font-size:12px;
}

@charset "UTF-8";

body

{

font-family:Helvetica,'Helvetica Neue','Mplus 1p','Hiragino Kaku Gothic Pro','ヒラギノ角ゴ Pro W3',Meiryo,メイリオ,Osaka,'MS PGothic'!important;

font-size:12px;

}

HTML

index.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta http-equiv="content-type" content="text/html; charset=UTF-8">
	<title>WYSIWYGエディターサンプル</title>
	<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
	<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
	<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
	<link rel="stylesheet" href="css/style.css">
	<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
</head>
<body class="hold-transition fixed skin-blue-light sidebar-mini ">
<div class="wrapper" >
<div style="margin: 20px;">
<pre>
Summernote のサンプル。
BootstrapのシンプルなWYSIWYGエディターです。
簡単にリッチテキストを作成することができます。

APIなどは以下を参照してください。
https://summernote.org/deep-dive/

</pre>
</div>
	<div>
		<textarea id="contents">
			
		</textarea>
	</div>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/lang/summernote-ja-JP.js"></script>
<script src="js/script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>WYSIWYGエディターサンプル</title>

</head>

<pre>

Summernote のサンプル。

BootstrapのシンプルなWYSIWYGエディターです。

簡単にリッチテキストを作成することができます。

APIなどは以下を参照してください。

https://summernote.org/deep-dive/

</pre>

</div>

<div>

</textarea>

</div>

</body>

</html>

Javascript

js/script.js

/**
 * ページ読み込み時の処理
 */
$(function(){

	// リッチテキストの設定
	$('#contents').summernote({
		height: 580,
		fontNames: ["YuGothic","Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo","sans-serif", "Arial","Arial Black","Comic Sans MS","Courier New","Helvetica Neue","Helvetica","Impact","Lucida Grande","Tahoma","Times New Roman","Verdana"],
		lang: "ja-JP",
		//toolbar: [
		//	['style', ['bold', 'italic', 'underline', 'clear']],
		//	['font', ['strikethrough']],
		//	['fontsize', ['fontsize']],
		//	['color', ['color']],
		//	['table', ['table']],
		//	['insert', ['link', 'picture']],
		//	['view', ['fullscreen']],
		//	['para', ['ul', 'ol', 'paragraph']],
		//]
	});

});

/**

* ページ読み込み時の処理

$(function(){

// リッチテキストの設定

$('#contents').summernote({

height:580,

fontNames:["YuGothic","Yu Gothic","Hiragino Kaku Gothic Pro","Meiryo","sans-serif","Arial","Arial Black","Comic Sans MS","Courier New","Helvetica Neue","Helvetica","Impact","Lucida Grande","Tahoma","Times New Roman","Verdana"],

lang:"ja-JP",

//toolbar: [

// ['style', ['bold', 'italic', 'underline', 'clear']],

// ['font', ['strikethrough']],

// ['fontsize', ['fontsize']],

// ['color', ['color']],

// ['table', ['table']],

// ['insert', ['link', 'picture']],

// ['view', ['fullscreen']],

// ['para', ['ul', 'ol', 'paragraph']],

//]

});