LaravelのLaraMCEバンドルで簡単ビジュアルエディタ設置

今日は、LaravelでリッチテキストビジュアルエディタのTinyMCEを簡単に設置するためのLaraMCEバンドルの使い方を調べてみたいと思います。

1. コマンドプロンプトを起動して、Artisanコマンドで下記のように記述します。

cd c:\xampp\htdocs\laravel
php  artisan bundle:install laramce

2. bundles.phpにlaramceを登録します。今回の追加分は7行目です。

laravel/application/bundles.php

return array(
'docs' => array('handles' => 'docs'),
 'admin' => array('handles' => 'admin'),
 'swiftmailer'=>array('auto'=>true),
 'verify'=>array('auto'=>true),
 'laracaptcha'=>array('auto'=>true,'handles'=>'captcha'),
 'laramce'=>array('auto'=>true),
);

3. configファイルapplication.phpの196行目あたりにLaraMCEを呼び出すためのエイリアスを追加登録します。

laravel/application/config/application.php

'aliases' => array(
 'Auth' => 'Laravel\\Auth',
 'Authenticator' => 'Laravel\\Auth\\Drivers\\Driver',
・・・・・・・(中略)・・・・・・・・・・・
 'Validator' => 'Laravel\\Validator',
 'View' => 'Laravel\\View',
 'RTE' => 'Laramce\\RTE',
 ),

上記の7行目が今回の追加分です。

4.  再びartisanコマンドで、TinyMCE用のアセットを設定します。

php artisan bundle:publish

5. テンプレートビューファイルにTinyMCE用のjavascriptを適用させるために<head></head>の中に下記のコードを記述します。

Asset::container(‘laramce’)->scripts();

6. そして、TinyMCEを適用したいフォームのテキストエリアに下記のように記述します。

RTE::rich_text_box($name,
 $value = '',
 array('att'=>array('id'=>'editorId')),
 'selector'=>'editorSelector',
 'mode'=>'full',
 'setup'=>array(
 'skin'=>'o2k7',
 'skin_variant'=>'black')
 ))

7. それでは、実際に使って見たいと思います。以前『swiftmailerでメール送信』で使用したビューファイルを下記のように修正します。

laravel/application/views/hello/sendmail.blade.php

@layout('layouts.master')
@section('content')
{{ Form::open(URL::current(),'POST',array('class'=>'form-horizontal')) }}
<fieldset>
<div class="control-group">
{{ Form::label('name','送信先名',array('class'=>'control-label')) }}
<div class="controls">
 {{ Form::text('name',Input::old('name')) }}
 {{ $errors->has('name') ? $errors->first('name','<p><span class="label label-important">:message</span></p>') : '' }}
</div>
</div>
<div class="control-group">
{{ Form::label('email','送信先Eメール',array('class'=>'control-label')) }}
<div class="controls">
 {{ Form::text('email',Input::old('email')) }}
 {{ $errors->has('email') ? $errors->first('email','<p><span class="label label-important">:message</span></p>') : '' }}
</div>
</div>
<div class="control-group">
{{ Form::label('subject','件名',array('class'=>'control-label')) }}
<div class="controls">
 {{ Form::text('subject',Input::old('subject')) }}
 {{ $errors->has('subject') ? $errors->first('subject','<p><span class="label label-important">:message</span></p>') : '' }}
</div>
</div>
<div class="control-group">
{{ Form::label('body','本文',array('class'=>'control-label')) }}
<div class="controls">
{{ RTE::rich_text_box('body','',array('att'=>array('id'=>'editorID'),'selector'=>'editorSelector','mode'=>'full','setup'=>array('skin'=>'o2k7','skin_variant'=>'black'))) }}
 {{ $errors->has('body') ? $errors->first('body','<p><span class="label label-important">:message</span></p>') : '' }}
</div>
</div>
<div class="form-actions">
{{ Form::submit('メール送信',array('class'=>'btn btn-primary')) }}
</div>
</fieldset>
{{ Form::close() }}
@endsection

今回修正した箇所は29行目だけです。

8. ブラウザで確認してみます。下記のようになりました。

9. それでは、実際にメール送信してみます。下記のようなメールが届きました。

本日は以上です。

このエントリーを含むはてなブックマーク Buzzurlにブックマーク livedoorクリップ Yahoo!ブックマークに登録

トラックバック&コメント

この投稿のトラックバックURL:

コメントをどうぞ

このページの先頭へ