eguide で FCKeditor をサポートして欲しい、なんて話があったのでメモ。

ああいう HTML エディタは基本的に textarea の扱いを変更するだけで実現されている。したがって、JavaScript のコードを多少張り付ければ済む構造になっている。別にモジュール手を加えなくても、HTML を入力するフォームのテンプレートを少し変更すればよいだけだ。

ありがたいことに、XCL に組み込む解説 があったのでこれを参考に eguide に摘要してみる。


テンプレート: eguide_admin.html
@@ -128,14 +128,28 @@
 </p>
 <{/if}>
 </fieldset>
 <h3><{$smarty.const._MD_INTROTEXT}></h3>
-<{$summary_textarea}>
+<script type="text/javascript" src="<{$xoops_url}>/common/fckeditor/fckeditor.js"></script>
+<script type="text/javascript">
+function fckeditor_exec(target, width, height, url) {
+	var area_width = width;
+	var area_height = height;
+	var xoops_url = url;
+	var oFCKeditor = new FCKeditor( target, area_width, area_height, "Default" );
+	oFCKeditor.BasePath = xoops_url + "/common/fckeditor/";
+	oFCKeditor.ReplaceTextarea();
+}
+</script>
+<textarea id="summary" name="summary"><{$summary|escape}></textarea>
 <h3><{$smarty.const._MD_EXTEXT}></h3>
 <textarea name="body" wrap="virtual" cols="60" rows="10"><{$body}></textarea>
+<script>
+fckeditor_exec("summary", "100%", "350", "<{$xoops_url}>");
+fckeditor_exec("body", "100%", "350", "<{$xoops_url}>");
+</script>
 
-<h3><{$smarty.const._MD_EVENT_STYLE}></h3>
-<{$input_style}>
+<input type="hidden" name="style" value="0" />
 
 <h3><{$smarty.const._MD_RESERV_SETTING}></h3>
 <div><input type="checkbox" name="reservation" value="1"<{if $reservation}> checked<{/if}>/> <{$smarty.const._MD_RESERV_DESC}></div>
 <div>
とりあえず、これだけで FCKeditor を使って編集できるようになる。まあ、ツールバーが多すぎなので調整した方がよいかな。
--
安冨 伸浩 (マイサイト管理人)