web-dev-qa-db-ja.com

どのようにカスタムカラー見本をすべてのWYSIWYGエディタに追加しますか？

私は、サイト全体のWYSIWYGエディタに表示されるカラーピッカーパネルの下部にある色見本に同じカスタムカラーを追加して、クライアントがスタイルを統一しやすくすることを望みます。

私が参照する見本はスクリーンショットの一番下の行です。

理想的には、プラグインをインストールせずにこれを行いたいです。

Colour chooser 

wysiwygcolor-picker
3
Clayton Jones

Custom...テキストをクリックするとカラーピッカーがポップアップします。好きな色を選んでOKを押してください。選択した色は後で使用するためのカスタムスウォッチとして表示されます。

注意してください。 上記の解決策は解決策ではありません。下記のコメントを見て編集してください。

編集：

これはデフォルトパレット全体をカスタムスウォッチに置き換える関数です。

リストには8色ではなく7色があることに注意してください。これは、テキストに適用された色を削除するカラーリストの最後に乗算X（x）もあるはずです。したがって、もう1行追加すると、16色ではなく15色になります。

function my_mce4_options($init) {

    $custom_colours = '
        "3366FF", "Color 1 name",
        "CCFFCC", "Color 2 name",
        "FFFF00", "Color 3 name",
        "99CC00", "Color 4 name",
        "FF0000", "Color 5 name",
        "FF99CC", "Color 6 name",
        "CCFFFF", "Color 7 name"
    ';

    // build colour grid default+custom colors
    $init['textcolor_map'] = '['.$custom_colours.']';

    // change the number of rows in the grid if the number of colors changes
    // 8 swatches per row
    $init['textcolor_rows'] = 1;

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

また、色番号とUI要件に応じて、独自のスウォッチグリッドを構築することもできます。

$init['textcolor_rows'] = 4;
$init['textcolor_cols'] = 2;

主に このWPSE回答に基づいた 。

より多くの情報とカスタマイズについては このブログ記事 を見てください。

8
Max Yudin