Hi I'm using latest version of WordPress. I want add my shortcode in TinyMCE editor like this image: http://prntscr.com/72ycrs
嗨,我正在使用最新版本的WordPress。我想在TinyMCE编辑器中添加我的短代码,如下图所示:http://prntscr.com/72ycrs
My shortcode is:
我的短代码是:
[my_tabs]
[my_tab title = "Tab One Title"]Tab One Content Goes Here[/my_tab]
[my_tab title = "Tab Two Tiltle"]
[my_gallery source = "media: 2893" title = "Image Title"]
Tab Two COntent Goes Here [/my_tab]
[/my_tabs]
Can anyone help me to create a customize button for my shortcode as like above image. I don't understand javascript & jQuery much. Thanks in Advance.
任何人都可以帮我为我的短代码创建一个自定义按钮,如上图所示。我不太了解javascript和jQuery。提前致谢。
1 个解决方案
#1
Builded the simplest popup with Twist That Code: How to Add Custom Buttons for WordPress TinyMCE Editor
使用Twist That Code构建最简单的弹出窗口:如何为WordPress TinyMCE编辑器添加自定义按钮
functions.php:
// Filter Functions with Hooks
function harun_mce_button() {
// Check if user have permission
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// Check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'harun_tinymce_plugin' );
add_filter( 'mce_buttons', 'harun_register_mce_button' );
}
}
add_action('admin_head', 'harun_mce_button');
// Function for new button
function harun_tinymce_plugin( $plugin_array ) {
$plugin_array['harun_mce_button'] = get_template_directory_uri() .'/js/harun_editor_plugin.js';
return $plugin_array;
}
// Register new button in the editor
function harun_register_mce_button( $buttons ) {
array_push( $buttons, 'harun_mce_button' );
return $buttons;
}
active theme/js/harun_editor_plugin.js:
(function() {
tinymce.PluginManager.add('harun_mce_button', function(editor, url) {
editor.addButton('harun_mce_button', {
icon: false,
text: "Harun's Tabs",
onclick: function() {
editor.windowManager.open({
title: "Insert Harun's Tabs",
body: [{
type: 'textbox',
name: 'tab1title',
label: 'Tab One Title',
value: ''
},
{
type: 'textbox',
name: 'tab1content',
label: 'Tab One Content',
value: ''
},
{
type: 'textbox',
name: 'tab2title',
label: 'Tab Two Title',
value: ''
},
{
type: 'textbox',
name: 'tab2content',
label: 'Tab Two Content',
value: ''
},
{
type: 'textbox',
name: 'gallerysource',
label: 'Gallery source',
value: ''
},
{
type: 'textbox',
name: 'gallerytitle',
label: 'Gallery title',
value: ''
}],
onsubmit: function(e) {
editor.insertContent(
'[my_tabs][my_tab title="' +
e.data.tab1title +
'"]' +
e.data.tab1content +
'[/my_tab][my_tab title="' +
e.data.tab2title +
'"][my_gallery source="' +
e.data.gallerysource +
'" title="' +
e.data.gallerytitle +
'"]' +
e.data.tab2content +
'[/my_tab][/my_tabs]'
);
}
});
}
});
});
})();
#1
Builded the simplest popup with Twist That Code: How to Add Custom Buttons for WordPress TinyMCE Editor
使用Twist That Code构建最简单的弹出窗口:如何为WordPress TinyMCE编辑器添加自定义按钮
functions.php:
// Filter Functions with Hooks
function harun_mce_button() {
// Check if user have permission
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// Check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', 'harun_tinymce_plugin' );
add_filter( 'mce_buttons', 'harun_register_mce_button' );
}
}
add_action('admin_head', 'harun_mce_button');
// Function for new button
function harun_tinymce_plugin( $plugin_array ) {
$plugin_array['harun_mce_button'] = get_template_directory_uri() .'/js/harun_editor_plugin.js';
return $plugin_array;
}
// Register new button in the editor
function harun_register_mce_button( $buttons ) {
array_push( $buttons, 'harun_mce_button' );
return $buttons;
}
active theme/js/harun_editor_plugin.js:
(function() {
tinymce.PluginManager.add('harun_mce_button', function(editor, url) {
editor.addButton('harun_mce_button', {
icon: false,
text: "Harun's Tabs",
onclick: function() {
editor.windowManager.open({
title: "Insert Harun's Tabs",
body: [{
type: 'textbox',
name: 'tab1title',
label: 'Tab One Title',
value: ''
},
{
type: 'textbox',
name: 'tab1content',
label: 'Tab One Content',
value: ''
},
{
type: 'textbox',
name: 'tab2title',
label: 'Tab Two Title',
value: ''
},
{
type: 'textbox',
name: 'tab2content',
label: 'Tab Two Content',
value: ''
},
{
type: 'textbox',
name: 'gallerysource',
label: 'Gallery source',
value: ''
},
{
type: 'textbox',
name: 'gallerytitle',
label: 'Gallery title',
value: ''
}],
onsubmit: function(e) {
editor.insertContent(
'[my_tabs][my_tab title="' +
e.data.tab1title +
'"]' +
e.data.tab1content +
'[/my_tab][my_tab title="' +
e.data.tab2title +
'"][my_gallery source="' +
e.data.gallerysource +
'" title="' +
e.data.gallerytitle +
'"]' +
e.data.tab2content +
'[/my_tab][/my_tabs]'
);
}
});
}
});
});
})();