Home » WYSIWYGエディタTinyMCEを使う

pict-tinymce.png TinyMCEには色々なプラグインがありますが、今回はスペルチェックをおこなうspellcheckerを紹介します。

インストール

まず、spellcheckerのプラグイン本体PHP SellcheckerのアーカイブをTinyMCEのサイトよりダウンロードします。ファイル名はtinymce_spellchecker_php_2_0_2.zipのようになっています。

TinyMCE Download
http://tinymce.moxiecode.com/download.php

次にこのダウンロードしたプラグインを任意の場所で展開します。するとspellcheckerというディレクトリが作成されます。

TinyTinyMCEモジュール + TinyMCEの場合

この場合、上記のspellcheckerディレクトリをそっくりsites/modules/tinytinymce/tinymce/jscripts/tiny_mce/pluginsディレクトリにコピーします。このpluginsディレクトリには既にspellcheckerディレクトリがあるかと思いますがそっくり上書きしてしまってかまいません。

次に、TinyTinyMCEモジュールの環境設定のAdvancedモードのTinyMCE init scriptのpluginsパラメータにspellcheckerを追加し、ボタンのどこでも良いのでspellcheckerの追加をします。(下記の例では12行目と19行目に追加しています）

  1. tinyMCE.init({
  2.    mode : "exact",
  3.    file_browser_callback: "imceImageBrowser",
  4.    init_instance_callback : "resizeEditorBox",
  5.    theme : "advanced",
  6.    convert_urls : false,
  7.    plugins : "safari,pagebreak,style,layer,table,save,advhr,
  8.      advimage,advlink,emotions,iespell,insertdatetime,
  9.      preview,media,searchreplace,print,contextmenu,
  10.      paste,directionality,fullscreen,noneditable,
  11.      visualchars,nonbreaking,xhtmlxtras,template,
  12.      spellchecker",  // ここに追加
  13.    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,
  14.      |,justifyleft,justifycenter,justifyright,justifyfull,
  15.      |,formatselect,fontselect,fontsizeselect, styleselect,
  16.      | |,forecolor,backcolor, ",
  17.    theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,
  18.      |,search,replace,
  19.      |,spellchecker,  // ここに追加(お好きな場所にどうぞ)
  20.      |,bullist,numlist,
  21.      |,outdent,indent,|,undo,redo,
  22.      |,link,unlink,anchor,image,cleanup,help,code,
  23.      |,preview,fullscreen,",
  24.    theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,
  25.      |,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,",
  26.    theme_advanced_buttons4 : ",styleprops,|,cite,del,ins,attribs,
  27.      |,visualchars,nonbreaking,template,blockquote,pagebreak",
  28.    theme_advanced_toolbar_location : "top",
  29.    theme_advanced_toolbar_align : "left",
  30.    theme_advanced_statusbar_location : "bottom",
  31.    theme_advanced_resizing : true,
  32.    extended_valid_elements : "a[name|href|target|title|onclick],
  33.      img[style|class|src|border=0|alt
  34.      |title|hspace|vspace|width|height|align
  35.      |onmouseover|onmouseout|name],
  36.      hr[class|width|size|noshade],
  37.      font[face|size|color|style],
  38.      span[class|align|style]",
  39.    template_external_list_url : "example_template_list.js",
  40.    content_css: "/path/to/your/sites/stylesheet.css"
  41. });
これで準備は完了です。

Wysiwygモジュール + TinyMCEの場合

この場合はspellcheckerプラグイン本体に加えてWysiwyg SpellCheckという別モジュールをインストールする必要があります。

Wysiwyg SpellCheck
http://drupal.org/project/wysiwyg_spellcheck

Wygiwyg SpellCheckモジュールをインストールし、モジュールページより有効にします。これでsites/modulesにwysiwyg_spellcheckというディレクトリが作成されます。

次にspellchecker本体(spellcheckerディレクトリ)をこのsites/modules/wysiwyg_spellcheckの下にあるtinymceというディレクトリの中にそっくりコピーします。これで、sites/modules/wysiwyg_spellcheck/tinymce/spellcheckerというディレクトリになります。

次に、Wysiwygモジュールの環境設定のページに行き、TinyMCEのプロファイルの設定でボタンにSpell Checkというボタンの選択項目が追加されていますのでこれをチェックしてボタンを追加します。


spellcheckerの使い方

スペルチェッカーを使うにはツールバーのスペルチェッカーのアイコンをクリックするだけです。
ss-spellchecker-1.png
デフォルトではspellcheckerプラグインはGoogleのSpellcheckerサービスを利用するようになっています。これをサーバーにインストールしたスペルチェックプログラムに変更するには、spellcheckerプラグインディレクトリにあるconfig.phpファイルを編集します。（ここでは説明は省略します）

また、スペルチェックの対象言語ですが、デフォルトでは英語ですが、たとえばフランス語のように別の言語も追加することができます。対象言語の指定は、tinyMCEのinit scriptにspellchecker_languagesパラメータを追加します。
  1. tinyMCE.init({
  2.         theme : "advanced",
  3.         mode : "textareas",
  4.         plugins : "spellchecker",
  5.         theme_advanced_buttons3_add : "spellchecker",
  6.         spellchecker_languages : "+English=en,French=fr"
  7. });

詳しくは以下のページを参照ください。
TinyMCE Plugins:sellchecker
http://wiki.moxiecode.com/index.php/TinyMCE:Plugins/spellchecker

最近はブラウザーにもスペルチェック機能がついていたりするので導入する必要性はあまりないかもしれませんが、ご参考まで。

 

Your rating: None Average: 2 (1 vote)

answer this topic

Make your own life time easier take the business loans and everything you need.

by Anonymous on 06/18/2011 - 07:44