AOINA.COM

今までwordpressのエディタはビジュアルエディタではなく通常のエディタを利用していたのですが、
先日作ったwp-TinyMCE をいろいろカスタマイズしてたところ、もはやビジュアルエディタ使用者になってしまいました。

TinyMCEのオプションcontent_css(エディタ内のスタイル)を通常のスタイルと同じように設定して、
フルスクリーンモードにすると、エディタモードなのかプレビューなのかわからないくらいリッチなエディタに。

WordPressのリッチエディタにCSSを適用する | Tech de Goを参考に

ボタンコントロールの設定と一覧

theme_advanced_buttons1:"",            //ツールバー1段目の設定
theme_advanced_buttons1_add:"",        //ツールバー1段目に加える
theme_advanced_buttons1_add_before:"", //ツールバー1段目の前に加える
theme_advanced_disable:"",             //指定のボタンを使用不可にする

設定オプション

エディタの各部分の位置やサイズ

theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_path_location : "bottom",
theme_advanced_resizing : true,
theme_advanced_resize_horizontal : false,

その他オプション

//スタイルコントロールの設定
theme_advanced_styles : "class1=class1;class2=class2;",

//フォーマットコントロールの設定
theme_advanced_blockformats : "p,div,h1,h2,h3,h4,h5,h6,pre,blockquote,code",

//エディタ内のスタイルシート
//(wp-tinyMCEではthemes/(あなたのテーマ)/editor.cssがデフォルトとなっております)
content_css : “editor.css”

//日付や時間の挿入のフォーマット
plugin_insertdate_dateFormat : “%Y-%m-%d”,
plugin_insertdate_timeFormat : “%H:%M:%S”,

//エディタ内の自動的に改行
nowrap : false,

//出力するHTMLを自動に整形する <pre>内が勝手に整形された!
apply_source_formatting :false,

//*firefoxのみ Enterキーで改行した場合true:<p> false:<br /> falseにしたら文末のタグから出られない!
force_p_newlines : true,

よく使うリンク,イメージ,メディア等を登録

external_link_list_url : 　"mylinklist.js",
external_image_list_url : "myimagelist.js",
media_external_list_url : "mymedialist.js",
template_external_list_url : "mytemplatelist.js",

– mylinklist.js –

var tinyMCELinkList = new Array(
	// Name, URL
	["Moxiecode", "http://www.moxiecode.com"],
	["Freshmeat", "http://www.freshmeat.com"],
	["Sourceforge", "http://www.sourceforge.com"]
);

– myimagelist.js –

var tinyMCEImageList = new Array(
	// Name, URL
	["Logo 1", "logo.jpg"],
	["Logo 2 Over", "logo_over.jpg"]
);

– mylinklist.js –

var tinyMCEMediaList = new Array(
	// Name, URL
	["Some Flash 1", "test1.swf"],
	["Some Flash 2", "test2.swf"]
);

– mytemplatelist.js –

var tinyMCETemplateList = [
	// Name, URL, Description
	["Simple snippet", "templates/snippet1.htm", "Simple HTML snippet."],
	["Layout", "templates/layout1.htm", "HTML Layout."]
];

今後wp-TinyMCEに、tinyMCEImageList や tinyMCELinkList を動的に生成していきたいかも

[参考]

• TinyMCE:Configuration reference
• TinyMCE:Control reference

関連記事:

• wordpressのエディタ「TinyMCE」をカスタマイズするプラグイン (24)
• webベースのブログ投稿ツール「WriteToMyBlog」 (0)