Bootstrap3ベースのWYSIWYGエディタSummernote

CakePHPでSummernoteを利用する

使い方

ダウンロード

  • Bootstrap3とFont Awesomeによる美しいデザイン
  • 充実したショットカットキー
  • サーバサイドとシンプルな統合

などが特徴のWYSIWYGエディタSummernoteについて書いてみる。

Summernoteのコンパイルされたパッケージは以下のURLから得ることが可能。

http://summernote.org/getting-started/#compiled-css-js

[Download Compiled Summernote]というリンクからzipファイルをダウンロードできる。展開したのが画像の状態。

summernote-dist

パッケージ内で今回利用したファイルは、

  • summernote.css
  • summernote.js

の2つのファイルになる。

セットアップ

CakePHPでSummernoteを利用する例をあげてみるが、CakePHPに限らずcssとjsの読み込み設定は下のように行った。

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
<link rel="stylesheet" href="css/summernote.css">
<script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
<script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/summernote.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#summernote').summernote();
});
</script>

ここからはCakePHPに特化した内容になる。

  • Controller
  • layout
  • View

それぞれのコードを載せてみる。

Controller

public function summernote() {
	$this->layout = "summernote";
}

Controllerではlayoutを明示的に指定した。route.phpで、

Router::connect(
    '/summernote',
    array(
        'controller' => 'questions',
        'action' => 'summernote'
    )
);

と設定し

/summernote

でWYSIWYGエディタにアクセスできるようした。

layout

Controllerでsummernoteとしてlayoutを明示的に指定したので、

app\View\Layouts

summernote.ctp

を作成する。layoutの内容は以下のとおり

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
  <title>summernote on CakePHP</title>

  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" />
  <link rel="stylesheet" href="css/summernote.css">
</head>
<body>
  <?php echo $this->fetch('content'); ?>

  <script src="//code.jquery.com/jquery-1.9.1.min.js"></script> 
  <script type="text/javascript" src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
  <script type="text/javascript" src="js/summernote.js"></script>

  <script type="text/javascript">
    $(document).ready(function() {
      $('#summernote').summernote();
    });
  </script>
</body>
</html>

View

Viewではsummernoteのエディタに置き換わるHTMLのみを記述しておく。

<textarea id="summernote"><p>visual <b>text</b></p></textarea>

基本的なインストールは以上です。

参考

Summernoteにファイルアップロード機能を実装

Webエンジニアブログにコメント

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Bootstrap3ベースのWYSIWYGエディタSummernoteの記事にコメントを投稿