TinyMCE Advanced で table の tr に独自のスタイルを設定する

fri 231
(@3rdl81)

7年、 4ヶ月前
お世話になってます。

プラグイン：TinyMCE Advanced（https://ja.wordpress.org/plugins/tinymce-advanced/）にて、「スタイル」のセレクトボックスを作成し、editor-style.css で作成したクラスを使えるようになるところまで実装しました。

ここまでは以下のサイトを参照しました。

WordPressのTinyMCE Advancedに独自スタイルを追加させる方法
http://hiro007.com/web/185

これで文字の装飾などはできたのですが、他にも table の tr に背景色をつけたいです。
デフォルトの状態だと span か div にしかスタイルが設定できないのでしょうか。

また以下のサイトをみて、functions.php に追加スタイルの設定をしてみました。

WordPressのビジュアルエディター（TinyMCE）に独自タグ挿入用のスタイル選択ボックスを追加するカスタマイズ
http://nelog.jp/wordpress-tinymce-custom

このサイトを参考に、
```
$style_formats = array(
    array(
      'title' => '太字',
      'inline' => 'span',
      'classes' => 'bold'
    ),
```
のあたりに何か書くと動くのではないかと思ったのですが、うまくいく方法が分かりません。
アドバイスいただけたらと思います。

よろしくお願いします。
- このトピックはfri 231が7年、 4ヶ月前に変更しました。
- このトピックはfri 231が7年、 4ヶ月前に変更しました。

3件の返信を表示中 - 1 - 3件目 (全3件中)

ishitaka
(@ishitaka)

7年、 4ヶ月前

こんにちは

editor-style.css に下記のように tr を指定すればいいのではないでしょうか。

tr.foobar { background-color: #ff0000; }
トピック投稿者 fri 231
(@3rdl81)

7年、 4ヶ月前
ishitaka 様

返信いただき、ありがとうございます。
おっしゃるとおり、以下の手順で試しましたが、どうもHTMLにクラスが付与されない状態です。
1. editor-style.css にクラスを追記
2. 編集画面のビジュアルエディタを開く
3. クラスを適用させたい tr をドラッグでぴーっと選択（選択部分が青色に変化）
4. スタイルのセレクトボックスから適用させたいクラスをクリック
編集画面のタブをテキストエディタに切り替えて、手入力で tr にクラスを入力し、ビジュアルエディタに戻ると設定したクラスが反映されていますので、editor-style.css の記述は効いています。
でも、クラスの付与はビジュアルエディタで完結させたいので、上記手順4実行後に <tr class=”foobar”> が反映してほしいです。

ちなみに functions.php に以下のように記述すると、
<tr><div class=”row-gray”>テキスト</div></tr>
となり、惜しい状態になります。
```
$style_formats = array(
     array(
      'title' => '行（背景色グレー）',
      'block' => 'div',
      'classes' => 'row-gray'
    ),
```
HTML について調べたところ、tr はブロック要素でもインライン要素でもないように感じたので、上記「’block’ => ‘div’,」部分を tr 用に書くといいのかなと思ったところで行き詰りました。
- この返信は7年、 4ヶ月前にfri 231が編集しました。
ishitaka
(@ishitaka)

7年、 4ヶ月前
おかしいですね。当方で検証した環境（下記）では、スタイルに表示されて HTML にも反映されるのですが・・・。

WordPress 4.6.1
Twenty Sixteen 1.3
TinyMCE Advanced 4.4.1

では、$style_formats による方法でということで

下記のように selector で tr を指定すれば反映されると思います。
```
$style_formats = array(
     array(
      'title' => '行（背景色グレー）',
      'selector' => 'tr',
      'classes' => 'row-gray',
    ),
```

3件の返信を表示中 - 1 - 3件目 (全3件中)

トピック「TinyMCE Advanced で table の tr に独自のスタイルを設定する」には新たに返信することはできません。

トピックタグ

表示