プラグイン

WYSIWYGプラグイン用のインタフェースを作成

2010年3月26日

SVN177で、WYSIWYGプラグインが作成できるようにしました。まだ、テスト用に作成したプラグイン、jp_NicEditにしか対応していませんが、2-3日うちに複数のWYSIWYGをインストールした状態で、ユーザーごとにどのエディタを用いるのかを選択できるようにします。

2010-03-26-NicEdit.png

WYSIWYGプラグインでは、以下に述べる3つの実装が必要です。

1)プラグインクラスに、event_wysiwyg_textarea()メソッドを用意

jp_NicEditでは、次のように記述しています。
	static public function event_wysiwyg_textarea(&$array){
		static $first=true;
		$array['skin']='/jp/nicedit/textarea.inc';
		if ($first) {
			$first=false;
			$array['template']='first';
		} else {
			$array['template']='second';
		}
	}
引数$arrayの要素skinを書き換えて、独自のtextareaタグを出力するためのスキンを指定します。/jp/nicedit/textarea.incは、jp_NicEditの管理領域にあるファイル、textarea.incを挿します。次のような内容です。
<%if.data.is(first,template)%>
	<script type="text/javascript" src="<%view.skinfile(nicEdit.js)%>"></script>
	<script type="text/javascript" src="<%view.skinfile(extra.js)%>"></script>
<%endif%>

<textarea name="<%data(key)%>_text" id="input<%data(key)%>"><%data.hsc(value)%></textarea>
<script type="text/javascript">
var options={fullPanel : true, iconsPath : '<%view.skinfile(nicEditorIcons.gif)%>'};
jp_nicedit_register_wysiwyg('input<%data(key)%>',options);
</script>

ここは、WYSIWYGエディタを扱ったことのある人なら分かると思います。

2)画像を挿入する際は、JavaScriptでjeans_add_media_button()を呼び出す。
3)JavaScriptでjeans_insert_image()を実装し、この中で画像挿入を行う。

jp_NicEditの場合、管理領域のextra.jsに、これらに相当する部分のコードが有ります。
var jp_nicedit_register_wysiwyg=function(id,option){
	if (!arguments.callee.objects) arguments.callee.objects=[];
	arguments.callee.objects[id]=new nicEditor(option).panelInstance(id);
};
var jeans_insert_image=function(){};

var nicImageButton = nicEditorAdvancedButton.extend({	
	addPane : function() {
		var that=this;
		jeans_insert_image=function(src,alt,width,height){
			jeans_insert_image=function(){};
			var tmp = 'javascript:nicImTemp();';
			that.ne.nicCommand("insertImage",tmp);
			that.im = that.findElm('IMG','src',tmp);
			if(that.im) {
				that.im.setAttributes({
					src : src,
					alt : alt,
					width: width,
					height: height
				});
			}
		}
		this.removePane();
		jeans_add_media_button();
	}
});


同時に、メディアマネージャー用のインターフェースも用意しました。上記の2)3)の逆のことをします。すなわち、
1)jeans_add_media_button()を実装
2)jeans_insert_image()を呼び出す。

このあたりの規約は、βの公開までに決定したいと思います。まだ、変更の余地有りです。

jp_NicEditは現在のところ、ここから取得できます。

コメント

Kat (2010年6月27日 09:47:59)

プラグインでメディアマネージャーを構築する場合は、次のように。
1)event_media_managerを実装。$array[`skin`]にスキンファイルへのパスを設定する。スキンファイルでは、jeans_add_media_button()とjeans_popup_media_button()を実装。skins/admin/edititem.incの、mediamanegerテンプレートを参考にして記述。
2)メディアの挿入に、window.opener.jeans_insert_image(url,name,width,height)を呼び出す。

コメント送信