Tag Archives: TinyMCE

「Ultimate TinyMCE」でWordPressのビジュアルエディターをカスタマイズ

WordPressのビジュアルエディターのカスタマイズを簡単にするプラグインと言えば、「TinyMCE Advanced」が定番であるが、今回紹介する「Ultimate TinyMCE」もビジュアルエディターのカスタマイズを簡単に行う事ができる優秀なプラグインである。 リリースから間もないが、既に人気プラグインとなっており、「Ultimate TinyMCE」も「TinyMCE Advanced」と並んで定番となりそうである。 「TinyMCE Advanced」が4行にわたって自由にアイコンを配置し、順序の変更や区切りの表示も柔軟に出来るのに対して、「Ultimate TinyMCE」は、デフォルトで表示される2行に加えて3行目、4行目に表示するボタンをチェックボックで選択する仕組みを採用している。 順番の変更は出来ない。単に表示/非表示が選べるだけである。 柔軟性を欠くものの、その分気軽さがあり、下記のように簡単にビジュアルエディターにボタンを追加できる。 また、ボタンを追加してくれる以外に、標準のボタンの機能拡張も行なってくれる。 下記は、拡張された「リンクの挿入/編集」ボタンである。 既存のボタンの拡張に関しては、個人的には不要なので、設定画面で選択出来るようになると有難い。 過去のバージョンでは、WordPressのインストールパスによっては、設定画面でアイコンが表示されないバグがあったが、バーッジョン1.5.6以降では、これも解消している。 また、バージョン1.5.7以降は、設定画面の日本語表示にも対応した。 ちなみに「TinyMCE Advanced」と「Ultimate TinyMCE」の共存はできない、エラーになるわけではないが、同時に有効化すると、ボタンの配置は「TinyMCE Advanced」の設定が優先され、一部のボタンは「Ultimate TinyMCE」のものと置き換わる。

Posted in WordPress, ネット・PC | Tagged , , | 2 Comments

TinyMCE Backslash Button バージョン0.2 リリース

「TinyMCE Backslash Button バージョン0.2」をリリースした。 最新の「TinyMCE Backslash Button」をダウンロードする バージョン0.2では、HTMLエディター上でもフォントの指定付きでバックスラッシュを入力出来るQuicKtagを追加した。 これによって、ビジュアルエディター、HTMLエディターの両方でバックスラッシュの入力が可能になった。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , | Leave a comment

記事にバックスラッシュを入力するためのプラグイン「TinyMCE Backslash Button」

バックスラッシュ「\」を記事に入力する手助けをするプラグイン「TinyMCE Backslash Button バージョン0.1」を新しく公開した。 最新の「TinyMCE Backslash Button」をダウンロードする 日本語環境では、「\」は、「\」として表示されてしまうが、「TinyMCE Backslash Button」を使えば「\」の入力が可能となる。 標準のビジュアルエディター(TinyMCE)に追加されるボタンを使って簡単に「\」を入力でき、「\」になること無く「\」をそのまま表示させることが可能。 仕組みとしては、欧文フォントを「\」に適用しているだけのため、クライアントの環境によっては「\」と表示されず、「\」となる場合もある。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , | Leave a comment

WordPressの投稿やコメントで使えるタグを追加する

WordPressの投稿やコメントでタグを使ったところ、タグが消されたり、属性が消されたりした経験はないだろうか? このような現象は、記事やコメントを保存した後や、ビジュアルエディターとHTMLエディターを切り替えた後に起こっているはずた。 これは、単に禁止されているタグや属性があるからなのだが、逆に言えばきちんと許可さえしてやれば削除されなくなる。 実は、WordPressでは、入力出来るタグや属性を制限する仕組みは2つある。 1つは、HTMLエディターでの制限で、ksesというフィルターによるもの。「/wp-includes/kses.php」での制限である。 この制限は、HTMLエディターを利用する投稿画面とコメント欄で有効であるが、管理者権限を持つものには適応されないので、管理者として記事を投稿し、コメントを書いているなら、そもそも制限はないので無視して良い。 もし何かの事情で許可したいなら「/wp-includes/kses.php」に記述されている配列にタグや属性を追加すれば良い。 投稿画面の場合は、 $allowedposttags = array( ‘address’ => array(), ‘a’ => array( ‘class’ => array (), ‘href’ => array (), ‘id’ => array (), ‘title’ => array (), ‘rel’ => array (), ‘rev’ => array (), ‘name’ => array (), ‘target’ => array()), ‘abbr’ => array( ‘class’ => array (), ‘title’ => array ()), にタグや属性を追加する。 コメント欄の場合は、 $allowedtags = array( ‘a’ => array( ‘href’ => array (), ‘title’ => array ()), ‘abbr’ => array( ‘title’ => array ()), ‘acronym’ => array( ‘title’ => array ()), ‘b’ => array(), に付け加えれば良い。 上記と同じような記述は、プラグインやfunctions.phpでも書くことが出来る。 私は、コメントで使えるタグを追加で許可する構文をプラグイン中で書いているので、それを参考にまとめておく。 function my_allowedtags_in_comments($data) { global $allowedtags; $allowedtags['pre'] = array( ‘name’=>array(), ‘class’=>array()); $allowedtags['script'] = array( ‘type’=>array(), ‘class’=>array()); … 続きを読む →

Posted in PHP, WordPress, ネット・PC | Tagged , , , , | Leave a comment

WordPress 3.2以降のフルスクリーンモードにボタンを追加する

私は、WordPressの標準のビジュアルエディター「TinyMCE」に独自の機能を持ったボタンを追加するプラグインを作っている。 SyntaxHighlighter TinyMCE Button しかし、WordPress 3.2以降では、フルスクリーンモードの仕様が変わり、今まで通りのやり方ではノーマルモードでしか追加したボタンが表示されなくなってしまった。 試行錯誤の結果、WordPress 3.2以降で、フルスクリーンモードにボタンを追加する方法が分かったのでまとめておく。 既に「TinyMCE」にボタンを追加する「TinyMCE」用のプラグインを作成し、有効化済みであることを前提とするので、「TinyMCE」へのボタンの追加自体の説明は省略する。 ボタンを追加する手順自体は、過去のバージョンと同じである。フルスクリーンモードへの追加には、これとは別に次のような処理が必要となる。 まずは、「wp_fullscreen_buttons」フックを使ってフルスクリーンモードにボタンを追加する。 以下は、「my_button」の場合の例である。 function my_fullscreen_button($buttons) { $buttons[] = ‘separator’; // 必要ならボタンの前に区切りを追加 $buttons['my_button'] = array( ‘title’ => __(‘My button’), // マウスオーバーで表示されるテキストラベル ‘onclick’ => “tinyMCE.execCommand(‘my_button_cmd’);”, // 実行するコマンド ‘both’ => false); // trueならHTMLエディターでも表示 return $buttons; } add_filter(‘wp_fullscreen_buttons’, ‘my_fullscreen_button’); 「onclick」で実行しているコマンドは、 ed.addCommand(‘my_button_cmd’, function() { のような形で、既に「TinyMCE」用プラグイン内のJavaスクリプトとして記述しているはずなので、それを実行させる。 ここまでの作業で、既にフルスクリーンモードにボタンが追加され、ボタンも機能しているはずだ。 しかし、ボタンラベルのアイコンが表示されていない。 続いて、ボタン上にアイコンを表示させるための処理を追加する。 アイコンは、CSSを使ってボタンの背景として表示させる。 まず、次のように背景の画像を定義したCSSファイルを準備する。 .wp_themeSkin span.mce_my_button { background: url(“my_icon.png”) no-repeat 20px 20px; background-position:0 0 } ボタンを表示させる箇所のclass属性は「mce_ボタンの登録名」となるので、この場合は「mce_my_button」となる。 今度は、このCSSを、エディター画面で読み込ませる処理を書く。 function my_editor_style() { wp_enqueue_style(‘my-editor-style’, ‘http://www.near-mint.com/blog/my_editor_style.css’, false, ’1.0′); } add_action(‘admin_print_styles-post.php’, ‘my_editor_style’); add_action(‘admin_print_styles-post-new.php’, ‘my_editor_style’); add_action(‘admin_print_styles-page.php’, ‘my_editor_style’); add_action(‘admin_print_styles-page-new.php’, ‘my_editor_style’); 以上で、ボタンのアイコンも表示され、無事、フルスクリーンモードへのボタンの追加が完了する。

Posted in PHP, WordPress, ネット・PC | Tagged , , | Leave a comment

SyntaxHighlighter TinyMCE Button バージョン0.7 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.7」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.7では、ボタンをクリックした時に表示されるポップアップウィンドウの入力オプションのデフォルト値を設定できるようになった。 これは、あるユーザーさんからのリクエストに応えて実装した機能である。 例えば、言語を選択するドロップダウンリストから使わない言語を除外して、リストを自分好みにカスタマイズ出来る。 デフォルトのドロップダウンリストには、かなり沢山の言語が登録されているが、実際に必要な言語は限られるているはずなので、必要ないものを無効にすることでリストをスッキリと整理できる。 また、行番号が必要ないなら、予め行番号を表示しない設定にしておくことで、ボタンでの余計な操作を省くことが出来る。 なお、「使用中のプラグイン」で、特定のプラグインを選択している場合は、そのプラグインの設定に従いデフォルト値を決定しているため、この機能をフルに生かすためには「その他」を選択すると良い。 バージョン0.7では、設定項目が一気に増えたため、設定をリセットするボタンも追加した。 巷では「WordPress 3.2」がリリースされ、既にバージョンアップを済まされている方も少なくないと思うが、「WordPress 3.2」では、ビジュアルエディターのフルスクリーンモードが変更され、フルスクリーンモードでは「SyntaxHighlighter TinyMCE Button」のボタンが表示されなくなってしまった。 フルスクリーンモードへのボタンの追加方法が分かり次第、この点は改善したいと考えているが、まだ情報収集の段階である。 /wp-admin/includes/post.php を見たところ、 「wp_fullscreen_buttons」フックを使えば、何とかなりそうな気がするが・・・。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , , | Leave a comment

SyntaxHighlighter TinyMCE Button バージョン0.6 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.6」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.6では、ポップアップウィンドウのサイズを変更するためのオプションが追加された。 また、特殊なインストール環境でも動作するように、プラグインディレクトリの取得方法を変更した。 これに伴い、「セーフモード」は廃止した。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , , | Leave a comment

SyntaxHighlighter TinyMCE Button バージョン0.5 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.5」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.5では、ボタンを追加する行が選択できるようになっている。 ツールバー上の1行目から4行目までの選択が可能で、比較的ボタンの少ない行を選択することで、以前のバージョンよりも見やすくボタンを配置できる。 加えて「SyntaxHighlighter Evolved」に最適化された動作モードを搭載した。 ただし、「SyntaxHighlighter Evolved」を使用する場合は、「SyntaxHighlighter Evolved」の設定画面で「すべてのブラシを読み込む」を有効にする必要がある。 また、バージョン0.4.1で、環境によっては「SyntaxHighlighter TinyMCE Button」を有効にするとTinyMCEのツールバーが表示されなくなると言う不具合の報告を受けているが、その対処として「セーフモード」を搭載した。 このモードを選択すると、通常とは異なる方法で、TinyMCEプラグインの追加を行う。 「安全なモード」と言うより、「第二のモード」と言った方が適切だろう。 もし、正常にボタンが表示されないなどの不具合が出る場合は、この「セーフモード」を試して欲しい。 バージョン0.5では、コードの書き直しを行っており、中身は、過去のバージョンとは随分と異なるものになっている。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , , | Leave a comment

SyntaxHighlighter TinyMCE Button バージョン0.4 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.4」を公開した。 最新の「SyntaxHighlighter TinyMCE Button」をダウンロードする バージョン0.4では、新しいオプションが追加されており、強調表示したい行を指定できるようになっている。 また、新機能として「WP SyntaxHighlighter」および「Syntax Highlighter Compress」に最適化された動作モードを設定画面から選択できるようになっている。 最適化されたモードを選択した場合、データベースからこれらのプラグインの設定値の読み取り、ボタンをクリックしたときに表示されるオプションのデフォルト値に反映する。 その他のプラグインを使う場合、最適化されたモードで動作させたくない場合は「その他」を選択すれば良い。 バグフックスとしては、TinyMCEのフルスクリーンモードで「CODE」ボタンが機能しない問題を解消した。 「pre」ボタンも同様の問題を抱えているが、こちらは解消出来ていない。 しかし、フルスクリーンモードでも、言語、オプションの更新は実行可能だ。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , , | Leave a comment

SyntaxHighlighter TinyMCE Button バージョン0.3 リリース

「SyntaxHighlighter TinyMCE Button バージョン0.3」をリリースした。 最新の「SyntaxHighlighter TinyMCE Button」をダンロード このバージョンでは、新しく追加された機能はないが、ハイライト表示に関するオプションが増えた。 「行番号の開始番号」の指定と「html-script」オプションの有効化が出来るようになっている。 これにより、ソースコード毎に、より細かな設定が可能になった。 さて、プラグインの高機能化は、順調に進んでいるが、ここで1つの問題に直面してしまった。 「wordpress.orgのプラグインディレクトリ」へ「TortoiseSVN」を使ってファイルをアップロードしているが、5/10のバージョン0.2を最後に、なぜか「Last Updated」の日付が更新されなくなってしまった。 更新されないのは「Last Updated」のみで、ファイルやバージョン、readme.txtは、順調に反映されている。 フォーラムでも、この問題は数多く報告されており、同様の現象に悩む開発者も多いが、これと言った解決策が見つかっていない。 plugins.svn.wordpress.org update script does not update date この現象の原因について心当たりがあれば、ぜひ、ご教示頂きたい。 追記:この問題については、自己解決した。 ただし、原因も解消した理由も不明である。 実施した作業は下記の通り。 普段、私は、「readme.txt」の「Stable tag」をバージョンで記述しているが、これを「trunk」に変えて、「readme.txt」のみをTortoiseSVNでコミットし、その後で「ブランチ/タグ」を実行した。(trunkで指定しているので、タグは、現時点ではあまり意味を成さないが・・・。) 少し待って、ダウンロードファイルに含まれるreadme.txtが置き換わった事と「Other Versions」にタグが反映された事を確認。しかし、この時点では「Last Updated」に変化は無かった。 今度は「tags」から先ほど作成したバージョンのタグを一旦削除し、「Stable tag」をバージョンで記述した「readme.txt」のみをコミットし、「ブランチ/タグ」を実行したところ、「Last Updated」が更新された。

Posted in WordPress, ネット・PC, 自作アプリ | Tagged , , , | Leave a comment