我正在尝试在TinyMce编辑器中添加youtube按钮。
这里是一个最近的帖子。js文件，位于主题目录的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);
})();
函数中的代码。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>\'但在文本编辑器中，它只是以文本的形式显示出来，而不是字体可怕的图标。我应该在哪里放置字体awesome文件，我应该如何调用它，以及如何在TinyMce中使用它？
最合适的回答,由SO网友:Matt Royal 整理而成
您无法通过将FontAwesome图标直接传递到ed.addButton(); 方法。
不过，您可以尝试解决方法。如果您离开image : url+\'/youtube.png\' 参数，则会自动创建一个空<span> 与mceIcon &；另一类mce_[plugin_name].
然后可以使用CSS来设置样式<span> 元素，无论您喜欢什么。
现在，您可以在CSS中直接使用FontAwesome，类似这样的内容（请确保更改.mce_[plugin_name] 将此处使用的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;
}
UPDATE
下面是我加载FontAwesome CSS文件的方式。不过，我已经适应了为管理区域加载所需的内容。我从引导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\' );
SO网友:klewis
我在WordPress 4.6.1上测试了以下内容
我最初查找这个过程是为了帮助创建一个按钮，该按钮将生成一个短代码。基于一些不同的帖子，我最初在javascript文件中使用以下addButton参数来装饰我的TINYMCE按钮。。。
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包括\\js\\tinymce\\plugins\\wordpress\\plugins。js公司
您将发现各种选项，如。。。
wp_help
wp_more
wp_page
wp_code
我不相信这些是fontawesome图标，但它们足够接近我完成工作，而无需添加额外的css或cdn链接引用。
