Symfonyのリッチテキストエディタの使い方｜Webシステム開発の株式会社フラッツ

Symfonyでは、入力フォームでリッチテキストを入力する機能が標準で用意されています。今回はその方法を解説したいと思います。(この記事はSymfony1.0系で検証した記事になります。)

TinyMCEとFCKeditorの概要

Symfonyではリッチテキスト入力のためにJavaScriptのライブラリを利用します。
ライブラリとしてはTinyMCEかFCKeditorを利用できます。
今回は、それぞれのライブラリでリッチテキスト入力を行うための設定方法を説明したいと思います。

それぞれのライブラリのリンク、ライセンス、対象バージョンは下記のとおりです。

• Tiny MCE
  
  • ライセンス LGPL
  • リリースバージョン 3.2.0.2
• FCKeditor
  
  • ライセンス GPL,LGPL,MPLのいずれか
  • リリースバージョン 2.6.3

メニュー

それぞれのデフォルトのメニュー表示は下記のようになります。この状態で非表示になっている機能もありますので、機能を特定するためにこちらは参考になりません。

リッチテキストライブラリの配置

Symfonyでリッチテキストの機能を使うためには、それぞれJSのライブラリをSymfonyに配置しなければなりません。

配置は以下のようになパスとなります。

• Tiny MCE
• 1. [アプリケーションパス]/web/js/tiny_mce 配下にTiny MCEのサイトからダウンロードしたファイルを配置。
  2. [アプリケーションパス]/web/js/tiny_mce/tiny_mce.jsのようにjsファイルが配置されるようディレクトリ階層を適切に設定する。
  3. [アプリケーションパス]/web/js/tiny_mce/langs/ja.js にTiny MCEのサイトからダウンロードした言語パックを配置。

• FCKeditor
  
  1. [アプリケーションパス]/web/js/fckeditor配下にFCKeditorのサイトからダウンロードしたファイルを配置。
  2. [アプリケーションパス]/web/js/fckeditor/fckeditor.jsのようにjsファイルが配置されるようディレクトリ階層を適切に設定する。

Symfonyの設定

[アプリケーションパス]/config/settings.yml にそれぞれ下記のような設定を追記します。

all:

  .settings:

    rich_text_js_dir:js/tiny_mce/ #TinyMCEのフォルダへの相対パス

    rich_text_fck_js_dir: js/fckeditor/  #FCKeditorのフォルダへの相対パス

次に、設定を反映するためには「symfony cc」コマンドでキャッシュをクリアします。

symfony cc

Symfonyの入力フォームでの利用方法

入力フォームの設定の例をしめします。

「[アプリケーションパス]/apps/front/modules/sample/template/indexSuccess.php」

<?php echo form_tag('sample/save') ?>



<-- TinyMCE（日本語、メニューはadvanced） -->

<h1>TinyMCE normal</h1>

<?php echo textarea_tag('mceNormalBody', '',

'rich=true size=80x20 tinymce_options=language:"ja",theme:"advanced"') ?>



<-- TinyMCE（日本語、メニューはadvancedでメニュー項目を修正） -->

<h1>TinyMCE custom</h1>

<?php echo textarea_tag('mceCustomBody', '', 'rich=true size=80x20 ' .

'tinymce_options=language:"ja",theme:"advanced",' .

'theme_advanced_buttons1:' .

'"bold,forecolor,separator,bullist,numlist,separator,link,unlink",' .

'theme_advanced_buttons2:"code",theme_advanced_buttons3:""') ?>



<-- FCKeditor（日本語、メニューはadvanced） -->

<h1>FCKeditor normal</h1>

<?php echo textarea_tag('fckNormalBody', '',

'rich=fck size=80x20') ?>



<-- FCKeditor（日本語、メニューはadvancedでメニュー項目を修正） -->

<h1>FCKeditor custom>/h1>

<?php echo textarea_tag('fckCustomBody', '',

'rich=fck size=80x20 config=/js/fckeditor/myconfig.js') ?>



<?php echo submit_tag('保存') ?>



</form>

次に、フォームの入力内容を受け取るアクション「[アプリケーションパス]/apps/front/modules/sample/actions/actions.class.php」
は次のようになります

class sampleActions extends sfActions

{

 /**

  * Executes index action

  *

  */

 public function executeIndex()

 {



  return sfView::SUCCESS;

 }                          



 public function executeSave()

 {

  $this->mceNormalBody = $this->getRequestParameter('mceNormalBody', '');

  $this->mceCustomBody = $this->getRequestParameter('mceCustomBody', '');

  $this->fckNormalBody = $this->getRequestParameter('fckNormalBody', '');

  $this->fckCustomBody = $this->getRequestParameter('fckCustomBody', '');

  return sfView::SUCCESS;

 }

}

FCKeditorの場合には、JavaScriptの設定ファイルでメニューを設定する必要があります。

...

FCKConfig.DefaultLanguage = 'ja' ;

......

FCKConfig.ToolbarSets["Default"] = [

        ['Bold', 'TextColor','-','UnorderedList','OrderedList','-','Link','Unlink'],

        ['Preview','-','About']

] ;

...

まとめ

Symfonyでリッチテキストエディタを使うのは簡単ですが、クライアント側でHTMLを生成しているので、
どのようなユーザにもこの機能を使わせると、想定外の入力をされてしまうことがあります。
そういったことがない管理画面や特定のユーザのみが利用する局面であれば、利用価値が高い機能です。