AngularJSでWYSIWYGエディタを利用 | Webエンジニアブログ

AngularJSにSummernoteのWYSIWYGエディタを統合する

angular-summernoteでSummernoteをdirective化してAngularJSで利用可能

AngularJSにWYSIWYGエディタを導入する。

統合するビジュアルエディタは、SummernoteというWYSIWYGエディタになる。Summernoteの特徴は、

ie9以上とモダンブラウザ対応
モバイル端末から利用可
多言語化対応可能
キーボードショートカットあり
画像アップロード用コールバックあり
ie8対応予定

などである。このエディタをAngularJSで利用してみたい。

ダウンロード

以下のページから

Summernote本体
angular-summernote

をダウンロードした

http://hackerwins.github.io/summernote/features.html
https://github.com/outsideris/angular-summernote

jsの読み込み

ダウンロードしたファイルの読み込みは以下のように行った。index.htmlをすべて載せてみる。

<!doctype html>
<html ng-app="myApp">
	<head>
		<title>Summernote on AngularJS</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 ng-controller="AppCtrl">

		<div class="container">
			<h1>Summernote on AngularJS</h1>
			<ng-view></ng-view>
		</div>

		<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 src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.min.js"></script>
		<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular-route.min.js"></script>
		<script type="text/javascript" src="js/angular-summernote.min.js"></script>

		<script type="text/javascript" src="app.js"></script>
	        <script type="text/javascript" src="controllers.js"></script>
	</body>
</html>

Summernoteの初期設定を行うために、

<body ng-controller="AppCtrl">

bodyタグにAppCtrlというAngularJSのコントローラを設定した。

モジュールの読み込みとルーティング

app.js内でモジュールの読み込みとルーティング処理を行う。具体例は以下の内容

(function() {
        var ajs = angular.module('myApp', [
		'ngRoute',
		'myApp.controllers',
		'summernote'
	]);
	
	ajs.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
			$locationProvider.html5Mode(true);
			$routeProvider
                        .when('/new', {
				templateUrl: 'app/partials/new.html',
				controller: 'NewPostCtrl'
			})
			.otherwise({
				redirectTo: '/'
			});
		}
	]);
}());

冒頭でAngularJSでSummernoteを利用できるように、angular.moduleとして読み込みを行っている。その下の.configの部分でルーティング設定を行い、templateとcontrollerを指定している。

投稿フォームのHTML

ルーティング設定でtemplateUrlとして指定した部分HTMLは以下の内容にした。textareaにSummernoteのdirectiveを指定することで、フォームがWYSIWYG化される。

config=”options”

として同時にtextareaに設定することで、Summernoteの初期設定をカスタマイズすることが可能。オプション設定は、Controller内で行うことにした。

<div ng-controller="NewPostCtrl">
	<h2>New Recipe</h2>
	<form novalidate>
		<div class="row">
			<div class="col-md-12">
		        	<label>Title</label>
		        	<input type="text" ng-model="recipe.title"></input>
				<small class="error" ng-show="error.title">{{error.title}}</small>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
		        	<label>Body</label>
		        	<textarea summernote config="options" ng-model="recipe.body"></textarea>
				<small class="error" ng-show="error.body">{{error.body}}</small>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12">
		        	<button ng-click="savePost()"><b class="fa fa-plus-square"></b>Add Recipe</button>
			</div>
		</div>
	</form>
</div>

フォームは画像のように表示された。

ControllerでSummernoteの初期設定を行う

$scope.optionsで純粋なSummernoteオプションを設定することができる。

(function() {
    var ajs = angular.module('myApp.controllers', []);
    ajs.controller('AppCtrl', function($scope) {

		$scope.options = {
			height: 200,
			focus: true,
			tabsize: 2,
			styleWithSpan: false,
		};
    });

}());

サーバ側に画像を保存するためのファイルアップロードコールバックを利用する場合にはAppCtrlは以下のように設定することでバックエンド側に画像を保存するためのAjaxリクエストを送信することが可能。

ajs.controller('AppCtrl', function($scope, $rootScope, $http, $location) {
        $rootScope.appUrl = "http://restful-cakephp.local";
		
		$scope.options = {
			height: 200,
			focus: true,
			tabsize: 2,
			styleWithSpan: false,
			
			onImageUpload: function(files, editor, welEditable) {
				sendFile(files[0], editor, welEditable);
			}
		};

		function sendFile(file, editor, welEditable) {
			data = new FormData();
			data.append("file", file);
			$.ajax({
				data: data,
				type: "POST",
				url: $rootScope.appUrl+"/summernote",
				cache: false,
				contentType: false,
				processData: false,
				success: function(url) {
					console.log('success');
					editor.insertImage(welEditable, url);
				},
				error: function(response){
					console.log('error');
				}
			});
		}
});

Summernoteとangular-summernoteでシンプルにAngularJSにWYSIWYGエディタを統合できる。