wordpressのエディタ「TinyMCE」をカスタマイズするプラグイン

久しぶりの投稿ですが・・・

WordPressに搭載されるテキストエディタ「TinyMCE」の裏技が　Rikaさんの記事「WP2.1 隠されたボタン！ | Rif.2nd」で知って「おぉっ」と思ってたんですが、
そのテキストエディタTinyMCEのサイトを最近知りました。

そのサイトではいろいろとボタンのカスタマイズができるようなことが書いてあるのでwordpressにもできるかな？っと思ってソースを眺めていたらやはりhookできるようになっていました。

070507-2335.jpg

ということで早速プラグインを作ってみました。

インストール方法

  • wp-tinymceプラグインをダウンロードし解凍する
  • wp-includesを指定の場所にアップ
  • editor.css（ビジュアルエディタ用css）をあなたのスタイルに合わせて記述し、テーマフォルダにアップ
  • wp-tinymce.phpをプラグインフォルダにアップして有効化
  • 管理画面のオプションwp-tinymce内をいろいろと変更してみる

例えば
Example 04 - All buttons and pluginsのようにカスタマイズしたい場合は下記のように。

初期値は下記のようになっております。

theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,|,styleselect,formatselect,fontselect,fontsizeselect",

theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",

theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",

theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking",theme_advanced_styles : "sample1=sample1;sample2=sample2;",

theme_advanced_blockformats : "p,address,pre,h1,h2,h3,h4,h5,h6",

「ImageManager」プラグインを利用している方は、好きなボタン位置に”ps_imagemanager_tinymceplugin”を記述してください。 (追記:2007-05-14)

リファレンスは「TinyMCEのボタンコントロールの設定と一覧 」にあるので見てください。

テーブル生成ボタンやフルスクリーンモードボタンがとても便利。てかこのサイトまだWP2.0.5だよ。

DOWNLOAD:wp-tinymce.zip var.0.2.1 （WP2.1以上）

参考

var.0.2以下を導入している方へ (追記:2007-06-03)

下記のようなエラーが出る場合があるようなので、修正をお願いします。

  • 修正はwp-includes/js/tinymce内を元の状態に戻す
    (wordpressのwp-includes/js/tinymce部分を上書きでOKです)
  • var.0.2.1以上をインストール

コードビューボタンがまったく利かなくなったことと、ビジュアルビューで色の設定などして公開ボタンを押しても、まったく反応しないようです。

更新履歴

  • 2007/06/03 var.0.2.1エラーの修正
  • 2007/05/10 var.0.2 pluginを自動読み込み,エディタスタイルシートをeditor.cssにデフォルト指定
  • 2007/05/08 var.0.1
Tags: , , ,

関連記事:

この記事は参考になりましたか？ 4.44 (9件)
Loading ... Loading ...
Author / Date:
aoina on 2007-05-08 
Tags:
, , ,  
Social:
add to hatena hatena.comment (36) add to del.icio.us (30) add to livedoor.clip (6) add to Yahoo!Bookmark (8)  
Comments:
feed コメント (24) 
TrackBack URL:

comments (16)

  1. はじめまして。

    このプラグインはWordPress2.0.10でも動作するのでしょうか？

    コメント by aki | 2007/05/11 17:38:23

  2. >akiさん
    ごめんなさい。WordPress2.1以上となります。
    WP2.0.10でいろいろ試したのですが
    エディタのアイコンが表示されない不具合があります。

    コメント by aoina | 2007/05/11 22:57:36

  3. こんにちは。
    少々お聞きしたいことがあるのですが、「ImageManager」のようなプラグインのボタンを表示させることはできるのでしょうか。

    コメント by yuga | 2007/05/14 16:36:01

  4. >yugaさん
    自分も「TinyMCE」にそのような機能が無いかと探してたんですが、ImageManagerという高機能な画像管理プラグインがありましたね。
    で、ImageManagerを利用している場合は、設定画面で好きなボタン位置に ps_imagemanager_tinymceplugin を記述したら表示されました。

    コメント by aoina | 2007/05/14 22:16:18

  5. ありがとうございます。無事表示されました。
    あのあと色々と調べていたのですが、やっぱり難しかったです。

    コメント by yuga | 2007/05/14 23:35:37

  6. こんにちは。Google mapsではお世話になりました。
    こちらも興味を惹かれるものだったのでさっそくやってみました。
    管理画面にも「TineMCE」が現れ、投稿画面にも上の絵のようにいろんなボタンが表示されるようにもなりました。
    ただ、コードビューボタンがまったく利かなくなったことと、ビジュアルビューで色の設定などして公開ボタンを押しても、まったく反応しないようです。
    ちなみにWordpressME2.1.3です。
    このファイルのここを直すと直るかもなどありますでしょうか？

    コメント by ふかぞう | 2007/05/17 23:59:45

  7. はじめまして。Movabletypeには日本語でフルに使えるTinyMCEプラグインがあるのですが、WordpressデフォルトのTinyMCEはかなり機能が限定されていて、なんとかフルに使えるようにできないものかと、数ヶ月前からさまよっていましたが、今日下記のページを発見してインストールした後に、こちらのページにもたどり着いたしだいです。
    http://pica2.net/wp/2007/03/advanced-wysiwyg-editor-plugin/
    WPME2.1.3に入れて動いてます。2.1未満の人は、こちらを試してみてはいかがですか。

    残る課題は、ポップアップの説明文などを日本語化することだと思います。なにやらTinyMCEの本家サイトには日本語の言語パックもあるようですが、自分ではスキル不足でできないので、他力本願で書いてみました。

    コメント by thase | 2007/05/18 21:48:29

  8. >ふかぞうさん
    返事遅れてすみません。tinymceのバージョンによってscriptエラーがでるようです。修正の仕方は上記に書いておきました。

    コメント by aoina | 2007/06/03 02:25:16

  9. 以前、WP2.1.3で使用していた際には問題なく動作していたのですが、WP2.2.1で使用したところ設定画面のConfiguration option内が「」としか表示しません。（そのままコードを入力しても元にもどります）
    WP2.2.1にはまだ対応してないのでしょうか。

    コメント by hassy | 2007/07/12 14:30:32

  10. おひさしぶりです。
    あれからプラグインはうまくいきまして無事機能しています。
    ありがとうございました。
    今日は質問なんですが、ポップアップ表示の英語を日本語に修正することは可能でしょうか？
    よろしくお願いします。

    コメント by ふかぞう | 2007/07/24 18:14:40

  11. ＞ふかぞう さん
    自分も日本語にしたくて、
    本家の言語パックに翻訳が足りない部分を追加して日本語にできましたよ。

    コメント by spa | 2007/08/12 04:50:09

  12. 申し訳ないのですが、まったく動きませんでした。
    説明も不十分ですし…。

    詳細を説明するのも面倒ですが、とにかく自分には役に立たなかったのは確かです。
    「自分のスタイルにあわせて記述」というところも適当ではないかと思いました。
    お互い時間のムダをしてしまったようです。
    今後も頑張ってください。

    コメント by える | 2007/09/21 07:29:05

  13. はじめまして。
    プラグインをつくって頂きありがとうございます。
    早速使わせていただきたく、ダウンロードしてみたのですが、
    ME2.2.3ではうごかないのでしょうか？
    差し支えなければおしえていただけませんか？
    すみません

    コメント by まみぃ | 2007/10/11 10:10:19

  14. だいぶ後から話題に参加させていただいておりますが、私もプラグイン導入し、便利に使用させていただいております。ありがとうございます。
    まみぃさんの記事でご返事がなかったようなので、私もME2.2.3を使用しておりますが、正常に動作しました。
    おそらく、editor.cssの場所などを入れ間違えてるのかなと思います。（僕も間違えたんで…）editor.cssは自分が使用しているwp-content/thems/(自分のテーマ)と一緒に入れると正常に動きますよ〜。

    コメント by takaya | 2007/12/11 23:34:58

  15. はじめまして。
    エディタの使い勝手を求めて回遊していた処、こちらのページを発見しました。
    ローカルで試していた時は（ME2.2.3／MAMP）は全く問題がなく、「ありがたや〜」と思ってサーバにアップしたのは良いのですが、「各種設定」を開くと、

    Configuration optionに

    と入っているだけで、viewもsauceも全く表示されていませんでした。
    パーミッション、PHPのini、何か関係ありますでしょうか？？？

    コメント by かのかの | 2007/12/12 14:48:58

  16. WP 2.3.2へ導入してみました。

    設定画面で、下記のようなメッセージが・・・。
    Warning: file_get_contents(http://www.xxx.jp/yyy/wp-includes/js/tinymce/tiny_mce_config.php): failed to open stream: HTTP request failed! HTTP/1.1 401 Authorization Required in /usr/home/zzz/html/yyyr/wp-content/plugins/wp-tinymce.php on line 131

    しかし。管理設定画面でエラーがでるのですが、動いているような・・・。
    回避方法ご存じでしたら教えてください。

    よろしくおねがいします。

    コメント by みのる | 2008/01/18 16:11:42

trackbacks & pingbacks (8)

  4. 2007/09/29 12:20:06 Lovelog+*
  8. 2008/02/04 02:48:20 Technical Notes

コメントをどうぞ

Name:
※
Email:
※
Url:
Comment: