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?
3 s
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' );