Do you want to add the TinyMCE editor to the post excerpt textarea? While there’s probably a plugin for this, we have created a quick code snippet that you can use to enable TinyMCE editor for post the_excerpt WordPress.
Instructions:
All you have to do is add this code to your theme’s functions.php file or in a site-specific plugin:
function tinymce_excerpt_js(){ ?>
<script type="text/javascript">
jQuery(document).ready( tinymce_excerpt );
function tinymce_excerpt() {
jQuery("#excerpt").addClass("mceEditor");
tinyMCE.execCommand("mceAddControl", false, "excerpt");
}
</script>
<?php }
add_action( 'admin_head-post.php', 'tinymce_excerpt_js');
add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');
function tinymce_css(){ ?>
<style type='text/css'>
#postexcerpt .inside{margin:0;padding:0;background:#fff;}
#postexcerpt .inside p{padding:0px 0px 5px 10px;}
#postexcerpt #excerpteditorcontainer { border-style: solid; padding: 0; }
</style>
<?php }
add_action( 'admin_head-post.php', 'tinymce_css');
add_action( 'admin_head-post-new.php', 'tinymce_css');
Note: If this is your first time adding code snippets in WordPress, then please refer to our guide on how to properly add code snippets in WordPress, so you don’t accidentally break your site.
If you liked this code snippet, please consider checking out our other articles on the site like: 7 best VPN services for WordPress users and how to create a job application form in WordPress.
This doesnt work in WP 5.5.1
Is there something we need to update?
Thank you!
sen ne d?yorsun bree orospuu cocugu
I’m experiencing the same issue since updating. Is there an updated version of this function that might fix things up again?
Same problem here! Was working before update but now it’s gone! Thanks!
It was working before however after updating the tinyMCE its gone ???
Appreciate the code and just added to local WP site I am updating and seemed to work great so far. Thank You!
Perfect! Glad wpsnipp could help… Enjoy the code.
Life saver! Thank you so much 🙂
it EATS the line breaks…
hi kevin,
i added this snippet to my functions.php file but the editor doesn’t show. i’m using the pagelines framework. could it be because of that?
thx! handy without installing a giant plugin. Only one little issue: when you have a custom post type without any editors, the tinyMCE init runs anyway causing all js to break. with an extra check it works smoothly:
..
if (typeof(tinyMCE) !== ‘undefined’) {
tinyMCE.execCommand(“mceAddControl”, false, “excerpt”);
}
..
thx ! helped me a lot !
Cool glad that I could help enjoy!
any update on this? (this is mroncetwice btw)
thanks! exactly what I was looking for 🙂
Cool glad I could help Birgit,
WP 3.3 messes this function up royally .. when you leave a write page set to the HTML tab, upon returning to any of the write pages where this function is active, clicking back to the Visual tab brings up a blank textarea (not actually blank, but appears so as text is colored white). i see a lot of suggestions to use
do_action(‘edit_page_form’)
instead, but im not sure how do go about such a function.
any plans to update this function for use with WP 3.3?
I have not tried this snippet in wp 3.3 could be a number of things ill take a look and post an updated version for 3.3 and let you know what if any issues may have caused this for you.
[…] [Source: WPSNIPP] […]
Is there any way to display tabs for switching between Visual and HTLM?
Hi Jacek, a few people have requested this addition, ill have to look into it and see.
Thanks Kevin for this snippet.
Do you know how add the media buttons to the top ?
Sorry for my bad English
Thanks
Anne
No problem Anne, glad that you like the snippet. In regards to media_buttons, ill have to check that out not sure if this can be done easily. If so ill post a snippet.
How would I add this to the Additional Description field of WPEC ?
To add this to another field you would need to the ID of the field. On row 05 you can see #excerpt if you change that to the ID of the other textarea should work great. Please also note that I added some CSS on lines 14-16 to style things a little. You should remove that css and replace it with your own to make sure everything looks ok.
Brilliant! So for any other WPEC/WPSC (wp E-commerce) folks out there want to get this to work for the “Additional Description” section, then just change the ID #excerpt in the above function to #additional_description and change the class that is being added from “mceEditor” to “theEditor” and all will work!
Thanks Kevin for the great help.
Kevin, any idea how to add the visual/HTML tabs to the top of the excerpt?
To be honest I’m not sure, this not something I have ever thought about doing until you asked the question however, it is an interesting idea. ll take a look into this and see if I can come up with a snippet that I can post.
This is great — except, my line break/paragraphs aren’t preserved. So after an update the excerpt appears as one long line again. Is there an easy way to preserve paragraph breaks?
Hi Gary ill test that out and get back to you,
Hi Gary,
I looked things over again and it should be working it breaks line breaks into paragraphs so it should be working fine. Do you have any other code that is doing something to the_excerpt ?
I second that experience. But when viewing the content the paragraphs are there.
I am more interested in learning how to include images. If you have the time, drop me a line at [email protected] with a solution.