问题描述
如何在视觉编辑器 TinyMCE 版本 4 中添加自定义按钮?
目前我发现 this q&a 有一点点提示的主题,但不是解决方案或如何。但是,我找不到教程,文档,q& a 为主题添加一个自定义按钮到 TinyMCE 版本 4,包含在 WordPress 自版本 3.9-beta1 以来。
Goal
最佳解决方案
以下小插件在 WordPress TinyMCE 版本 4 的第 1 行内创建一个自定义按钮,在 WP 版本 3.9-beta2 中测试。
该插件包含 var_dump
以了解值。还可以将按钮添加到可视化编辑器的其他行,仅将其他钩子添加到第 2 行:mce_buttons_2
。
Result
插件,PHP 端 – tinymce4-test.php
<?php
/**
* Plugin Name: TinyMCE 4 @ WP Test
* Description:
* Plugin URI:
* Version: 0.0.1
* Author: Frank Bültge
* Author URI: http://bueltge.de
* License: GPLv2
* License URI: ./assets/license.txt
* Text Domain:
* Domain Path: /languages
* Network: false
*/
add_action( 'admin_head', 'fb_add_tinymce' );
function fb_add_tinymce() {
global $typenow;
// Only on Post Type: post and page
if( ! in_array( $typenow, array( 'post', 'page' ) ) )
return ;
add_filter( 'mce_external_plugins', 'fb_add_tinymce_plugin' );
// Add to line 1 form WP TinyMCE
add_filter( 'mce_buttons', 'fb_add_tinymce_button' );
}
// Inlcude the JS for TinyMCE
function fb_add_tinymce_plugin( $plugin_array ) {
$plugin_array['fb_test'] = plugins_url( '/plugin.js', __FILE__ );
// Print all plugin JS path
var_dump( $plugin_array );
return $plugin_array;
}
// Add the button key for address via JS
function fb_add_tinymce_button( $buttons ) {
array_push( $buttons, 'fb_test_button_key' );
// Print all buttons
var_dump( $buttons );
return $buttons;
}
脚本,JavaScript 端 – plugin.js
( function() {
tinymce.PluginManager.add( 'fb_test', function( editor, url ) {
// Add a button that opens a window
editor.addButton( 'fb_test_button_key', {
text: 'FB Test Button',
icon: false,
onclick: function() {
// Open window
editor.windowManager.open( {
title: 'Example plugin',
body: [{
type: 'textbox',
name: 'title',
label: 'Title'
}],
onsubmit: function( e ) {
// Insert content when the window form is submitted
editor.insertContent( 'Title: ' + e.data.title );
}
} );
}
} );
} );
} )();
Gist
使用 Gist bueltge/9758082 作为参考,或下载。 Gist 在 TinyMCE 中还提供了不同按钮的更多示例。
Links
-
Compat Plugin – 此插件包含旧 3.x 分支的几个兼容性文件。这使您可以运行大多数旧的 3.x 插件,并进行任何修改。
次佳解决方案
而且,如果您想要一个实际的图标按钮,那么您可以利用 dashicons 或自己的图标字体。
创建一个 CSS 文件,并在管理端排队;
i.mce-i-pluginname:before {
content: "f164";
display: inline-block;
-webkit-font-smoothing: antialiased;
text-align: center;
font: 400 20px/1 dashicons!important;
speak: none;
vertical-align: top;
}
基本上直接从核心。
参考文献
注:本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意,可以加入我们改善翻译效果:薇晓朵技术论坛。