所以我要回答我自己的问题,对于那些面临或将面临同样问题的人。
我添加了两个按钮。打开wordpress的内置窗口,选择一篇文章并插入链接。另一个打开wordpress的内置媒体窗口以选择图像。这就是你最终得到的结果。
您需要在一个单独的文件中包含两个PHP函数和一个JS函数。在函数中。php,或在任何有自定义函数的地方添加以下内容:
/**
* Add a custom button to tinymce editor
*/
function custom_mce_buttons() {
// Check if WYSIWYG is enabled
if ( get_user_option( \'rich_editing\' ) == \'true\' ) {
add_filter( \'mce_external_plugins\', \'custom_tinymce_plugin\' );
add_filter( \'mce_buttons\', \'register_mce_buttons\' );
}
}
add_action(\'admin_head\', \'custom_mce_buttons\');
// Add the path to the js file with the custom button function
function custom_tinymce_plugin( $plugin_array ) {
$plugin_array[\'custom_mce_button1\'] = get_template_directory_uri() .\'PATH_TO_THE_JS_FILE\';
$plugin_array[\'custom_mce_button2\'] = get_template_directory_uri() .\'PATH_TO_THE_OTHER_JS_FILE\';
return $plugin_array;
}
// Register and add new button in the editor
function register_mce_buttons( $buttons ) {
array_push( $buttons, \'custom_mce_button1\' );
array_push( $buttons, \'custom_mce_button2\' );
return $buttons;
}
和JS文件。
(function () {
tinymce.PluginManager.add(\'custom_mce_button1\', function(editor, url) {
editor.addButton(\'custom_mce_button1\', {
icon: false,
text: \'THE_TEXT_OF_THE_BUTTON\',
onclick: function (e) {
editor.windowManager.open( {
title: \'THE_TITLE_OF_THE_POPUP_WINDOW\',
body: [{
type: \'textbox\',
name: \'title\',
placeholder: \'PLACE_HOLDER_TEXT\',
multiline: true,
minWidth: 700,
minHeight: 50,
},
{
type: \'button\',
name: \'link\',
text: \'Insert/Edit link\',
onclick: function( e ) {
//get the Wordpess\' "Insert/edit link" popup window.
var textareaId = jQuery(\'.mce-custom-textarea\').attr(\'id\');
wpActiveEditor = true; //we need to override this var as the link dialogue is expecting an actual wp_editor instance
wpLink.open( textareaId ); //open the link popup
return false;
},
},
{
type: \'button\',
name: \'image\',
classes: \'sidetag-media-button\',
text: \'Insert Media\',
onclick: function( e ) {
jQuery(function($){
// Set all variables to be used in scope
var frame;
//it has to match the "textareaID" above, because it is the input field that we are
//going to insert the data in HTML format.
var imgContainer = $( \'.mce-custom-textarea\' );
// ADD IMAGE LINK
event.preventDefault();
// If the media frame already exists, reopen it.
if ( frame ) {
frame.open();
return;
}
// Create a new media frame
frame = wp.media({
title: \'Select or Upload Media\',
button: {
text: \'Use this media\'
},
multiple: false // Set to true to allow multiple files to be selected
});
// When an image is selected in the media frame...
frame.on( \'select\', function() {
// Get media attachment details from the frame state
var attachment = frame.state().get(\'selection\').first().toJSON();
// Send the attachment URL to our custom image input field.
var imageContent = \'<img class="side-tag-image" src="\'+attachment.url+\'" alt="\'+attachment.alt+\'" style="max-width:100%;"/>\'+attachment.caption;
imgContainer.val( imageContent + imgContainer.val() );
});
// Finally, open the modal on click
frame.open();
});
return false;
}
}],
onsubmit: function( e ) {
// wrap it with a div and give it a class name
editor.insertContent( \'<div class="CLASS_NAME">\' + e.data.title + \'</div>\');
}
});
}
});
});
})();
我希望这会对你们中的一些人有所帮助。。