マイサイトユーザーズ 2.0 - イベント案内で fckeditor を使う - XOOPSモジュール

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 を使って編集できるようになる。まあ、ツールバーが多すぎなので調整した方がよいかな。

--
安冨伸浩 (マイサイト管理人)

@@ -148,20 +148,19 @@ <h3><{$smarty.const._MD_EXTEXT}></h3> <textarea name="body" wrap="virtual" cols="60" rows="10"><{$body}></textarea> <{if $use_fckeditor}> -<script type="text/javascript" src="<{$xoops_url}>/common/fckeditor/fckeditor.js"></script> [color]+<script type="text/javascript" src="<{$xoops_url}>/class/xoopseditor/ckeditor/ckeditor/ckeditor.js"></script>[/color] <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, ("<{$use_fckeditor}>"=="Basic")?"Basic":"Default" ); - oFCKeditor.BasePath = xoops_url + "/common/fckeditor/"; - oFCKeditor.ReplaceTextarea(); + CKEDITOR.replace( target, { + toolbar:("<{$use_fckeditor}>"=="Basic")?"Basic":"Default", + } ); +} +window.onload = function() { + fckeditor_exec("summary", "100%", "350", "<{$xoops_url}>"); + fckeditor_exec("body", "100%", "350", "<{$xoops_url}>"); } -fckeditor_exec("summary", "100%", "350", "<{$xoops_url}>"); -fckeditor_exec("body", "100%", "350", "<{$xoops_url}>") </script> <input type="hidden" name="style" value="0" /> <{else}> <h3><{$smarty.const._MD_EVENT_STYLE}></h3>

イベント案内で fckeditor を使う

Re: イベント案内で fckeditor を使う

投稿ツリー