How to Customize the TinyMCE Editor Menubar in a WordPress Plugin Admin Page
As a WordPress developer, you may find yourself needing to customize the TinyMCE editor on your plugin's admin pages. One common requirement is to remove or configure the menubar, which can help streamline the editor's interface and focus users' attention on the content they're creating.
In this blog post, we'll explore how you can hook into the tiny_mce_before_init
filter to disable or configure the TinyMCE menubar in your WordPress plugin's admin pages.
Understanding the TinyMCE Editor in WordPress
The TinyMCE editor is the default rich text editor used in WordPress. It is a powerful and customizable WYSIWYG (What You See Is What You Get) editor that allows users to format their content with ease.
When you add a custom meta box or a custom post type to your WordPress plugin's admin pages, you may want to use the TinyMCE editor to allow users to input rich content. However, the default TinyMCE editor configuration may not always align with your plugin's needs.
One common customization is to remove or configure the menubar, which can help simplify the editor's interface and improve the user experience.
Disabling the TinyMCE Menubar
To disable the TinyMCE menubar in your WordPress plugin's admin pages, you can use the tiny_mce_before_init
filter. This filter allows you to modify the TinyMCE editor's configuration before it is loaded on the page.
Here's an example of how you can disable the menubar:
function wp2641_disable_tinymce_menu_bar($in) {
$in['menubar'] = false;
return $in;
}
add_filter('tiny_mce_before_init', 'wp2641_disable_tinymce_menu_bar');
In this code, the wp2641_disable_tinymce_menu_bar
function takes the $in
parameter, which represents the default TinyMCE configuration. We then set the 'menubar'
key to false
, effectively disabling the menubar. Finally, we return the modified configuration.
By adding this code to your WordPress plugin, the TinyMCE editor on your plugin's admin pages will no longer display the menubar.
Configuring the TinyMCE Menubar
Instead of completely disabling the menubar, you may want to customize it to include only the features you need. This can be achieved by modifying the 'menubar'
configuration option.
Here's an example of how you can configure the TinyMCE menubar to include only the "File" and "Edit" menus:
function wp2641_configure_tinymce_menu_bar($in) {
$in['menubar'] = 'file edit';
return $in;
}
add_filter('tiny_mce_before_init', 'wp2641_configure_tinymce_menu_bar');
In this code, we set the 'menubar'
key to a string that includes the menu items we want to display, separated by spaces. The available menu items are:
file
: The "File" menu, which includes options like "New", "Open", "Save", and "Print".
edit
: The "Edit" menu, which includes options like "Undo", "Redo", "Cut", "Copy", and "Paste".
insert
: The "Insert" menu, which includes options like "Image", "Link", "Table", and "Special character".
view
: The "View" menu, which includes options like "Fullscreen" and "Preview".
format
: The "Format" menu, which includes options like "Bold", "Italic", "Underline", and "Strikethrough".
table
: The "Table" menu, which includes options related to table manipulation.
tools
: The "Tools" menu, which includes options like "Spell checker" and "Word count".
help
: The "Help" menu, which includes the "TinyMCE documentation" option.
You can include any combination of these menu items in the 'menubar'
configuration to customize the TinyMCE menubar to your liking.
Disabling or Configuring the Menubar for Specific TinyMCE Instances
In some cases, you may want to disable or configure the menubar only for specific instances of the TinyMCE editor in your WordPress plugin's admin pages. This can be useful if you have multiple TinyMCE editors with different requirements.
To achieve this, you can use the tiny_mce_before_init
filter and check the $in['selector']
value to identify the specific TinyMCE instance you want to modify.
Here's an example of how you can disable the menubar only for a TinyMCE editor with the ID my-custom-editor
:
function wp2641_disable_tinymce_menu_bar($in) {
if ($in['selector'] === '#my-custom-editor') {
$in['menubar'] = false;
}
return $in;
}
add_filter('tiny_mce_before_init', 'wp2641_disable_tinymce_menu_bar');
In this code, we check the $in['selector']
value to see if it matches the ID of the TinyMCE editor we want to modify (#my-custom-editor
). If it does, we set the 'menubar'
key to false
to disable the menubar. If the selector doesn't match, we simply return the original $in
configuration.
You can use a similar approach to configure the menubar for specific TinyMCE instances by checking the $in['selector']
value and setting the 'menubar'
key accordingly.
Real-world Example: Disabling the Menubar in a Custom Meta Box
Let's consider a real-world scenario where you have a custom meta box in your WordPress plugin's admin pages, and you want to use the TinyMCE editor to allow users to input rich content, but you want to disable the menubar.
Here's an example of how you can achieve this:
// Add the custom meta box
function wp2641_add_custom_meta_box() {
add_meta_box(
'wp2641-custom-meta-box',
'Custom Meta Box',
'wp2641_render_custom_meta_box',
'your-custom-post-type',
'normal',
'high'
);
}
add_action('add_meta_boxes', 'wp2641_add_custom_meta_box');
// Render the custom meta box
function wp2641_render_custom_meta_box($post) {
wp_enqueue_editor();
$content = get_post_meta($post->ID, 'wp2641_custom_content', true);
?>
<textarea id="wp2641-custom-editor" name="wp2641_custom_content" style="width: 100%; height: 200px;"><?php echo esc_textarea($content); ?></textarea>
<?php
}
// Disable the menubar for the custom TinyMCE editor
function wp2641_disable_tinymce_menu_bar($in) {
if ($in['selector'] === '#wp2641-custom-editor') {
$in['menubar'] = false;
}
return $in;
}
add_filter('tiny_mce_before_init', 'wp2641_disable_tinymce_menu_bar');
// Save the custom meta box content
function wp2641_save_custom_meta_box($post_id) {
if (array_key_exists('wp2641_custom_content', $_POST)) {
update_post_meta(
$post_id,
'wp2641_custom_content',
$_POST['wp2641_custom_content']
);
}
}
add_action('save_post', 'wp2641_save_custom_meta_box');
In this example, we first add a custom meta box to a custom post type using the add_meta_box()
function. In the wp2641_render_custom_meta_box()
function, we enqueue the WordPress editor scripts and render a textarea with the ID wp2641-custom-editor
.
Next, we use the tiny_mce_before_init
filter to check the $in['selector']
value and disable the menubar for the #wp2641-custom-editor
TinyMCE instance.
Finally, we add a function to save the custom meta box content when the post is saved.
By following this approach, you can easily disable the menubar for a specific TinyMCE editor instance in your WordPress plugin's admin pages.
Get a Free AI Website Audit
Automatically identify UX and content issues affecting your conversion rates with Flowpoint's comprehensive AI-driven website audit.
Conclusion
In this blog post, we've explored how you can customize the TinyMCE editor's menubar in a WordPress plugin's admin pages. By using the tiny_mce_before_init
filter, you can easily disable or configure the menubar to suit your plugin's needs.
Remember that the TinyMCE editor is highly customizable, and you can explore other configuration options beyond the menubar to further tailor the editor to your specific requirements. By taking the time to optimize the TinyMCE editor, you can provide a more streamlined and user-friendly experience for your plugin's users.
For more information on customizing the TinyMCE editor in WordPress, check out the TinyMCE documentation. And if you're looking for a powerful web analytics tool to help you understand your website's user behavior and improve conversion rates, be sure to check out Flowpoint.ai.