WordPressプラグインの管理画面にビジュアルリッチエディターをつける

2010/07/12追記 先日リリースされたWordPress3.2で導入された禅モード(?)の影響により、ビジュアルエディター関連の処理が変更されているため、ここで紹介している内容はWordPress3.2では動作しません。

WordPressのプラグインの管理画面にビジュアルリッチエディターをつける際のメモ。

今回の記事ではとりあえず表示のみです。実際に投稿された記事に対する処理は次回で。

要件は以下のような感じ。

  • 投稿用のビジュアルリッチエディターと同じようにメディアアップロードも使う
  • 投稿用のビジュアルリッチエディター用に適用した各種のWordPressプラグインも適用したい。
  • CSSも投稿用のものを流用したい。

admin_head フックで必要なJavaScriptやCSSをロードする。

以下のような感じで、ビジュアルリッチエディターに必要なJavaScriptやCSSをロードします。

フックはadmin_head-hook_suffixを使用します。

単純にadmin_headだけでは、全てのページでロードされてしまうのでいろいろと心配事が増えると思います。

上記の関数を以下のような感じでコールしてください。

add_action('admin_head-hook_suffix', 'admin_head_editor');

hook_suffixはこのページを参考にして表示したいページのフックと置き換えてください。

実際にエディターを表示する

管理画面のHTML内に以下のソースを埋めこんでください。

<div id="poststuff">
<div id="postdivrich" class="postarea">
<?php the_editor($html, "content"); ?>
</div><!--end #postdivrich-->
</div><!--end #poststuff-->

the_editor() 関数ではデフォルトで表示したいHTMLやtextareaのid、name属性などを指定できます。

詳しくは、wp-includes/general-template.php の1789行目付近をごらんください。

保存時または出力時の処理

XSSなどに対処するためWordPressのフィルターを通す必要があります。

また、このままでは改行が消えますので、wpautop() を通す必要もあります。

これに関しては次回の記事で。