web-dev-qa-db-ja.com

カスタムTinyMCEボタンに新しいDashiconsを使用する方法

私は チュートリアル を追加するためにTinyMCEエディタと対話する方法についてTuts +（WordPress Codexからリンクされています）をフォローしてきました。その記事のコード例に従って、TinyMCEにボタンを追加するJSファイルがあります。アイコンを追加する関連するJSの断片は次のとおりです。

ed.addButton('dropcap', {
    title : 'DropCap',
    cmd : 'dropcap',
    image : url + '/dropcap.png'
});

これはWP 3.8以前の罰金でしたが、 Dashicons が導入されて以来、TinyMCEボタンに静的PNGを使用するのは時代遅れに見えます。しかし、Dashiconsを使ってTinyMCEボタンを取得する正しい方法は何だろうかと思っていましたか？ 便利なガイド が関連しているかもしれないDashiconsの使い方についての/ - があります（Dashiconsスクリプトをバックエンドで既にロードされるので、私はDashiconsスクリプトをキューに入れる必要がないと思います）。

tinymcewp-editor
4
MBL

WPダッシュボードにすでにロードされているDashicons CSSファイルを使用してアイコンのスタイルを設定するには、追加のCSSを追加する必要があります。 Wordpress（3.9）の最新ベータ版ではTinyMCE 4.0が使用されているので、これが以前のバージョンでも動作するかどうかわからない（ただし、以前のTinyMCEボタンで出力されたさまざまなクラスに合わせて修正バージョンが適している） WP 3.9（およびTinyMCE 4.0）では、エディタ上のアイコンが出力されます。

<div id="mce_16" class="mce-widget mce-btn" tabindex="-1" aria-labelledby="mce_16" role="button" aria-label="DropCap">
    <button role="presentation" type="button" tabindex="-1">
        <i class="mce-ico mce-i-dropcap"></i>
    </button>
</div>

2つの段階があり、最初にWP admin（新しいボタンのスタイル設定に使用される）にカスタムスタイルシートをエンキューする機能を追加します。

add_action( 'admin_enqueue_scripts', 'se12334_stylesheet_to_admin' );
/**
 * Add stylesheet to the admin pages
 */
function se12334_stylesheet_to_admin() {
    wp_enqueue_style( 'custom-mce-style', get_template_directory_uri() . 'PATH/TO/CSS.FILE' );
}

次に、Dashiconsの使用に関する James Kosterの ガイドに従って、:beforeのシンプルなCSSセレクタをあなたのアイコンのCSSクラスに適用することができます。元の質問の例の場合、CSSクラスはmce-i-dropcapになります。

.CUSTOM_MCE_BUTTON_CLASS:before {
    font-family: "dashicons";
    content: "\f100";
}

ただし、元のJSのed.addButton関数に画像を追加するための呼び出しも削除するようにしてください。フォントアイコンが代わりに使用されます。

カスタムスタイルシートが大きい場合はadmin_enqueue_scripts関数がすべての管理ページで呼び出されるため、読み込み時間が遅くなる可能性があります（ただし、アイコン定義のみを含む縮小スタイルシートは読み込み時間に大きな影響を与えることはありません）。

3
MBL

Dashiconを追加

TinyMCE内のすべてのボタンにはクラスがあり、これもカスタムボタンです。次の例のように、Dashiconsでスタイル設定したスタイルシートをwp_enqueue_style()スタイルシートに含めます。

.myicon:before {
    content: '\2605';
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    font: normal 16px/1 'dashicons';
    vertical-align: top;
}

デフォルトでは各編集ページでDashiconがアクティブになっていますが、Dashiconは依存スタイルシートに追加され、それも含まれていました。

ヘルパー

this plugin を見て、正しいフォント、WordPressバックエンドの中に含めるべきやり方や例を見つけてください。

TinyMCEとワードプレス3.9

私の側からこのトピックを発展させるためのちょっとしたヒント。 WP 3.9の次のリリースでは、TinyMCE 4.0 *に新しいAPIが含まれています。Tutsチュートリアルは、このトピックの解決策を見つけるための最良の手段ではありません。次の2つのリンクを参照して、WP 3.9-betaで現在の開発状況を確認してください。

ソース例、3.0と4.0

TinyMCE 3

  tinyMCE.onAddEditor.add(function(mgr, ed) {
    var editor = $('#' + ed.editorId + '.atjs');
    if (editor.length == 1) {
      ed.onInit.add(function(ed, l) {
        $(ed.contentDocument.activeElement).atwho({settings go here});
      });
    }
  });

TinyMCE 4

tinymce.init({
  selector: "#mce",
  init_instance_callback: function(editor) {
    $(editor.contentDocument.activeElement).atwho(at_config);
  }
});
6
bueltge

簡単な解決策はこのようにBase64でエンコードされたSVG画像を使うことです

ed.addButton('dropcap', {
    ...
    'image'      => 'data:image/svg+xml;base64,{{BASE64}}',
    ...
}

{{BASE}}はBase64でエンコードされたSVG画像です。

私はこれらのプレインストールされたLinuxコマンドを使ってGithubからSVGをダウンロードし、それをエンコードします（例としてTwitterアイコンを使用）。

#!/usr/bin/env bash
icon=Twitter
svg64=$(wget -O- -nv https://raw.githubusercontent.com/WordPress/dashicons/master/svg/$icon.svg | base64 -w 0) > /dev/null 2>&1 
echo $svg64

出力：

PD94bWwgdmVyc2lvb[...]Cg==
1
Nabil Kadimi

これがあなたの簡単な解決策です（うまくいけばこれは他の人々にも役立つでしょう）：

1）iconのカスタムクラス、この例では "myicons"を追加します。

(function () {
    tinymce.PluginManager.add('Twitter_button_plugin', function (editor, url) {
        editor.addButton('mce_Tweet_button', {
            title: 'Insert Tweet',
            icon: 'myicons dashicons-Twitter',
            onclick: function() {
                ...
            }
        });
    });
})();

2）管理者スタイルシートファイルをエンキューする

function load_custom_wp_admin_style() {
   wp_enqueue_style( 'custom_wp_admin_css', 'URL/TO/custom_admin_style.css' );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );

3）それから custom_admin_style.css ファイルにこれを追加します。

/**
 * TinyMCE add support for dashicons
 */
i.mce-i-myicon {
    font: 400 20px/1 dashicons;
    padding: 0;
    vertical-align: top;
    speak: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    margin-left: -2px;
    padding-right: 2px
}
0
Albo Best