“TinyMCE” タグの記事

2ヵ月前にこのブログで、TinyMCE Advanced が 5.2.0 にアップッデートされてから、テーブルのセルの枠線のドラッグを無効にして勝手に width や height が設定されないようにしてても、テーブルを挿入する際に強制的に全てのセルに均等の width が設定されてしまうことを書きました。
（TinyMCE Advanced のテーブルで勝手に設定される width 対策（妥協策））

その際は、width を設定させない解決策が見つからず、妥協策としてドラッグでサイズを調整できるという利便性を受け入れることにしたのですが、新規に制作するサイトはそれでもいいのですが、過去に制作したサイトは操作方法が変わってしまうので、TinyMCE Advanced をアップデートしないようにしていました。

しかし、セキュリティ面からもいつまでもアップデートしない訳には行かず、再度 width を設定させない方法を探ってみました。

“TinyMCE Advanced のテーブルで勝手に設定される width 対策（解決）” の続きを読む »

TinyMCE Advanced プラグインを利用すると、WordPress のビジュアルエディタでテーブルを挿入することができるのですが、このテーブルの挙動には以前から悩まされています。それは、テーブルと全てのセルに勝手に width や height を設定してしまうという仕様です。

以前の TinyMCE Advanced 5.1.0 までは、テーブルを挿入した時は問題ないのですが、テーブルの罫線をドラッグした際に width や height が追加されます。これは後述の方法で対策していました。

そして TinyMCE Advanced が 5.2.0 にアップッデートされた時、改善されるかと思いきや、ますます厄介なことに、テーブルを挿入した時に有無を言わさず width が設定されるようになっていました。5.3.0 になってもそれは変わらないのですが、その仕様を受け入れつつ、対策することにしました。

“TinyMCE Advanced のテーブルで勝手に設定される width 対策（妥協策）” の続きを読む »

WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で

add_editor_style("editor-style.css");

を記述することで、ビジュアルエディタにeditor-style.css が適用されます。

しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。

そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。

“ビジュアルエディタと公開画面で CSS を共有する” の続きを読む »

WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。

この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。

• ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える
• フォントサイズの選択肢を、ラベルを px、値を % で定義する

“TinyMCE のブロック要素とフォントサイズの選択肢” の続きを読む »