5

I'm trying to add a youtube button in TinyMce editor.

here is a recent-posts.js file which is in the js folder of the theme directory.

(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);
})();

code in functions.php is

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');

In place of image : url+'/youtube.png' i'm trying to use text :'<i class="fa fa-camera-retro"></i>'

But in text editor insted of font awesome icon , it is just showing as a text as it is. Where should i place the font awesome file and how should i call it and how to use it in TinyMce?

5

You wouldn't be able to add a FontAwesome icon by passing it directly to the ed.addButton(); method unfortunately.

You can try a workaround however. If you leave the image : url+'/youtube.png' parameter out of the method then it will automatically create an empty <span> with the class of mceIcon & another class of mce_[plugin_name].

You can then use CSS to style that <span> element however you would like.

You can use FontAwesome directly in your CSS now, something like this (make sure you change .mce_[plugin_name] place-hoder class used here to your actual class):

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;
}

UPDATE

Here is how I load my FontAwesome CSS file. I have adapted to load for the admin area for what you need to do however. I call it from the BootStrap CDN, but you could download the CSS file and load it from your theme or plugin folder using the same admin_enqueue_scripts(); function.

// 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' );
  • I'm not using a plugin. – user1906399 Jul 1 '14 at 14:23
  • and fontawesome's youtube icon comes using <i class="fa fa-youtube"></i>. How do i use this in css? – user1906399 Jul 1 '14 at 14:43
  • What you are doing in your code above is adding your own TinyMCE plugin - I'm not referring to using a WordPress plugin :-) I suggest looking at this tutorial to get a good overview of the process as well, might be helpful :-) – Matt Royal Jul 1 '14 at 14:44
  • 1
    Try this as you were using the wrong action and loading FontAwesome to the website not the Dashboard as you need to... function thought_script(){ wp_enqueue_style('fontawesome-style', get_template_directory_uri().'/font-awesome/css/font-awesome.min.css'); } add_action('admin_enqueue_scripts', 'thought_script'); – Matt Royal Jul 1 '14 at 15:32
  • 1
    Now i figured it out, it is not span element it is i element which will come if no text or image is specified. so i just needed to target i.mce-i-youtube class, which is different as you mentioned. I was looking for span element. ty for your help and time. – user1906399 Jul 1 '14 at 19:06
2

I tested the following on WordPress 4.6.1

I originally looked up this process to help create a button that would produce a shortcode. Based on some various posts, I originally used the following addButton parameters within my javascript file to decor my TINYMCE button...

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

...But I didn't want to create a new button from scratch or just a text label. I instead wanted to reference an existing icon in WordPress. I discovered that I could easily swap out the image: parameter for an icon: parameter like so...

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

Within WordPress, if you look within

path-to-site\wp-includes\js\tinymce\plugins\wordpress\plugins.js

you will discover various options like...

      wp_help
      wp_more
      wp_page
      wp_code

I don't believe these are fontawesome icons, but they are close enough for me in getting the job done without adding additional css or cdn link references.

0

Here is a greatly simple solution for this.

Firstly add the FontAwesome library to WordPress Backend by creating and adding it to admin_init

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);

Then on you javascript file:

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

This kind of hack worked for me. I am sure it will work for you as well :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.