web-dev-qa-db-ja.com

TinyMceエディタでfontawesomeアイコンをどうやって使うのですか？

TinyMceエディタにyoutubeボタンを追加しようとしています。

テーマディレクトリのjsフォルダにあるrecent-posts.jsファイルです。

(function() {
   tinymce.create('tinymce.plugins.buttons', {
      init : function(ed, url) {

         //for recent post button
         ed.addButton('recentposts', {
            title : 'Recent posts',
            image : url + '/youtube.png',
            onclick : function() {
               var posts = Prompt("Number of posts", "");
               var text = Prompt("List Heading", "");

               if (text != null && text != ''){
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]'+text+'[/recent-posts]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]'+text+'[/recent-posts]');
               }
               else{
                  if (posts != null && posts != '')
                     ed.execCommand('mceInsertContent', false, '[recent-posts posts="'+posts+'"]');
                  else
                     ed.execCommand('mceInsertContent', false, '[recent-posts]');
               }
            }
         });


         //for youtube video
          ed.addButton('youtube', {
            title : 'YouTube',
            text: 'YouTube',          
            onclick : function() {
               var id = Prompt("Video id", "");
               var text = Prompt("Video Heading", "");

               if (text != null && text != ''){
                  if (id != null && id != '')
                     ed.execCommand('mceInsertContent', false, '[yt id="'+id+'"]'+text+'[/yt]');
               }
               else{
                  if (id != null && id != '')
                     ed.execCommand('mceInsertContent', false, '[yt posts="'+id+'"]');
               }
            }
         });

      },
      createControl : function(n, cm) {
         return null;
      },
      getInfo : function() {
         return {
            longname : "me The Most Brilliant",
            author : 'me',
            authorurl : 'http://www.google.com',
            infourl : 'http://www.google.com',
            version : "1.0"
         };
      }
   });
   tinymce.PluginManager.add('buttons', tinymce.plugins.buttons);
})();

functions.phpのコードは

function register_button( $buttons ) {
   array_Push( $buttons,"recentposts", "youtube" );
   return $buttons;
}

function add_plugin( $plugin_array ) {
   $plugin_array['buttons'] = get_template_directory_uri() . '/js/recent-posts.js';
   return $plugin_array;
}

function my_recent_posts_button() {

   if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
      return;
   }

   if ( get_user_option('rich_editing') == 'true' ) {
      add_filter( 'mce_external_plugins', 'add_plugin' );
      add_filter( 'mce_buttons', 'register_button' );
   }

}

add_action('init', 'my_recent_posts_button');

image : url+'/youtube.png'の代わりに私はtext :'<i class="fa fa-camera-retro"></i>'を使用しようとしています

しかし、フォントの素晴らしいアイコンに夢中になっているテキストエディタでは、そのままテキストとして表示されています。フォントの素晴らしいファイルはどこに配置すればよいですか。また、どのようにしてそれを呼び出すべきですか。

csstinymceadmin-css
5
user1906399

残念ながら、FontAwesomeアイコンをed.addButton();メソッドに直接渡して追加することはできません。

ただし、回避策を試すことができます。 image : url+'/youtube.png'パラメータをメソッドから除外すると、mceIconのクラスと<span>の別のクラスを持つ空のmce_[plugin_name]が自動的に作成されます。

そうすれば、CSSを使用してその<span>要素をスタイルすることができます。

FontAwesomeをCSSで直接使用することができます。このようにします（ここで使用している.mce_[plugin_name] place-hoderクラスを実際のクラスに変更してください）。

span.mce_[plugin_name] {
    position: relative;
}

span.mce_[plugin_name]:before {
    content: "\f166"; /* Value for the Youtube icon*/
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    text-decoration: inherit;
/*--adjust as necessary--*/
    color: #000;
    font-size: 18px;
    padding-right: 0.5em;
    position: absolute;
    top: 10px;
    left: 0;
}

_アップデート_

これがFontAwesome CSSファイルのロード方法です。私はあなたがしかし何をする必要があるかのために管理領域のためにロードするのに適応しました。 BootStrap CDNから呼び出しますが、CSSファイルをダウンロードして、同じadmin_enqueue_scripts();関数を使用してテーマまたはプラグインフォルダからロードすることもできます。

// Load Font Awesome
function royal_enqueue_awesome() {
    wp_enqueue_style( 'prefix-font-awesome', '//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css', array(), '4.0.3' );
}

add_action( 'admin_enqueue_scripts', 'royal_enqueue_awesome' );
5
Matt Royal

私はWordPress 4.6.1で以下をテストしました。

私はもともとこのプロセスを調べて、ショートコードを生成するボタンを作成する手助けをしました。いくつかのさまざまな投稿に基づいて、私はもともと私のTINYMCEボタンを装飾するために私のjavascriptファイル内で次のaddButtonパラメータを使用していました...

ed.addButton('wpse72394_button', { title: 'title of my button', cmd: 'wpse72394_inser', image: url + '/path/to/image.png' });

...しかし、最初から新しいボタンを作成したり、テキストラベルだけを作成したくはありませんでした。代わりにWordPressの既存のアイコンを参照したいと思いました。私は簡単に image： パラメータを icon： パラメータに交換できることを発見しました。

ed.addButton('wpse72394_button', { title: 'Insert shortcode', cmd: 'wpse72394_insert_shortcode', icon: 'wp_code' });

WordPress内では、内を見れば

サイトへのパス\ wp-includes\js\tinymce\plugins\wordpress\plugins.js

あなたはのような様々なオプションを発見するでしょう...

      wp_help
      wp_more
      wp_page
      wp_code

私はこれらが素晴らしいアイコンであるとは思わないが、追加のcssまたはcdnリンク参照を追加することなく仕事を成し遂げるのにそれらは私にとって十分に近い。

2
klewis

これは非常に簡単な解決策です。

まずFontAwesomeライブラリを作成して admin_init に追加してWordPressバックエンドに追加します。

function fontawesome_dashboard() {
   wp_enqueue_style('fontawesome', 'https://use.fontawesome.com/releases/v5.1.1/css/all.css'); 
}

add_action('admin_head', 'fontawesome_dashboard', 11);

それからあなたのjavascriptファイルに：

ed.addButton('recentposts', {
            title : 'Recent posts',
            icon: ' fa fa-camera-retro', // notice a space before the 'fa'

この種のハックは私のために働きました。私はそれがあなたにもうまくいくと確信しています:)

0
Pito Axiu