TinyMCEでDIV枠の挿入ができなかったのでワンタッチで挿入できるようにしてみる。
TinyMCEのプラグインを作る
簡単なプラグインの作成 プラグインファイルの作成TinyMCEというWebブラウザで稼働するWYSIWYGなHTMLエディタがある。
ブログやCMSで多く採用されているので一度は、目にしたことがあると思う。
スタンダードなホームページ作成ソフトよりも柔軟性が高いのが特徴で何と言っても自分なりにカスタマイズできるのが良い。
例えば、スタイルシートをエディタ部分に適応させて見たままに操る、CGIと組み合わせてドキュメント作成システムを構築。
また、足りない機能をプラグインとして補うことができる。
簡単なプラグインの作成
このようなドキュメントサイトに必要なのは、スタイルシート(CSS)での統一の他、文章構成を統一させる必要がある。
例えば、重要な部分は、オレンジの背景の枠で見せるなどだ。ドキュメント作成において、それらの決まったタグを
頻繁に使うので、ワンタッチで挿入できるようにしてみよう。
プラグインファイルの作成
例題として「minitemplate」フォルダを作り、minitemplateプラグイン（仮称）を作成した。
このプラグインは、ボタンクリックで「Sample-Text」を挿入するだけの機能を持つ。
TinyMCEのプラグインは、「jscripts/plugins/」にまとめて格納されている。
- そこに任意の名前（半角英数字のみ）でフォルダを作る
- 「editor_plugin.js」という名前でファイルを作成してメモ帳やエディタで開く
- 下記のコードを保存する。
(function() {
// tinymce.plugins.minitemplate = プラグイン関数名
tinymce.create('tinymce.plugins.minitemplate', {
init : function(ed, url) {
var t = this;
t.editor = ed;
ed.addCommand('minitemplate', // コマンドID
// 関数ポインタとして記述
function() {
var str = t._Sample();
ed.execCommand('mceInsertContent', false, str);
// mceInsertContent = カーソル位置に挿入するコマンド
// str = 挿入するデータ
}
);
ed.addButton('minitemplate', {title : 'サンプルプラグイン', cmd : 'minitemplate'});
// minitemplate = ボタンID
// サンプルプラグイン = チップヘルプ
// minitemplate = コマンドID
}, // メソッド(ここで本処理)
_Sample : function(d, fmt) {
fmt = "Sample-Text";
return fmt;
}
});
// プラグインの登録
tinymce.PluginManager.add('minitemplate', tinymce.plugins.minitemplate);
// ↑プラグインID ↑プラグイン関数名
})();
プラグインを使用する
作成したプラグインは、設定によって使用の有無を決めなければならない。
「examples」フォルダに格納されているfull.html、simple.htmlを参考にするのが近道だろう。
ちなみに設定は、次の部分で行う。
<html>
<head>
<script type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// 共通設定
language : "ja", // 言語
docs_language : "ja",
accessibility_focus : true,
table_inline_editing : true,
mode : "textareas",
theme : "advanced",
plugins : "minitemplate
,safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,inlinepopups", /* ツールバーのボタンを定義 */
theme_advanced_buttons1 : "minitemplate
,save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",
theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak", theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_statusbar_location : "bottom",
theme_advanced_resizing : true, // エディタに適応させるCSSを指定
// content_css : "/Skin/MainStyle.css",
// 大きさ
height : "90%",
template_external_list_url : "lists/template_list.js",
external_link_list_url : "lists/link_list.js",
external_image_list_url : "lists/image_list.js",
media_external_list_url : "lists/media_list.js", template_replace_values : {username : "Some User",staffid : "991234"
}
});
</script>
</head>
<body>
<textarea id="MyTextarea" name="MyTextarea">初期のHTML</textarea>
</body>
</html>
「minitemplate」が追加されたボタンIDとプラグインIDです。
これを実行すると空白のアイコンが左上に表示され、それをクリックすると「Sample-Text」がカーソル位置に挿入されます。
ツールバーにアイコンを表示させる
上記のプラグインを作成したことにより、任意のテキスト（HTML)を簡単に挿入できるボタンが作れたが
無地のアイコンでは、見栄えが良くない、複数作ると機能を把握できなくなってしまうのでアイコンを表示させたい。
CSSファイル、「ui.css」に定義されている。アイコンの絵柄は、「items.gif」を参照している。
これは、テーマによって位置が異なってしまうのが問題だが、上記のサンプルで言えば、
「jscripts/tiny_mce/themes/advanced/img/icons.gif」がベースとなるアイコンの絵柄。
「jscripts/tiny_mce/themes/advanced/skins/default/ui.css」がアイコンやツールバー、メニューのスタイル。
アイコンファイル、items.gifの編集は、面倒なので別にファイルを作ってアイコンを作り、ui.cssに追加する。
- 「20x20」ピクセルで適当な絵を描く。
- 「jscripts/tiny_mce/themes/advanced/img/minitemplate.gif」としてGIF形式で保存。
（CSSで使うだけなので任意の場所、任意の名前、任意の形式で良い） - 「jscripts/tiny_mce/themes/advanced/skins/default/ui.css」をメモ帳で開く。
- 一番下に下記のスタイルを追加する。 ↓background-imageは、使えない。
.defaultSkin span.mce_minitemplate {background: url("../../img/minitemplate.gif")}
↑アイコンの画像ファイル
このページを印刷するには、ここをクリックしてください。
通常の表示に戻るには、ブラウザの更新ボタンかF5キーを押してください。
コメント
トラックバック
サイト情報(連絡先・リンクについて) (C)2007-2008 PC Memo ALL Rights Reserved. 今日:1 総合:1
