Add TinyMCE Editor to the WordPress Excerpt Field

Recently a customer wanted to add formatting to the excerpt field in WordPress posts.

There is a plugin called tinymce excerpt  but it doesn’t work any more in WordPress 3.4

I found this post by Kevin Chard that nearly solved the problem, but the editor didn’t show the linebreaks after loading the content because they were converted to n so I hooked a “nl2br()” before the excerpt was loaded in the editor.

To protect the page layout against the blog authors 😉 I customized the menu buttons in tinymce.

Here is the result you can copy and paste to your themes functions.php:

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");
                        tinyMCE.onAddEditor.add(function(mgr,ed) {
                            if(ed.id=="excerpt"){
                                ed.settings.theme_advanced_buttons2 ="";
                                ed.settings.theme_advanced_buttons1 = "bold,italic,underline,seperator,justifyleft,justifycenter,justifyright,separator,link,unlink,seperator,pastetext,pasteword,removeformat,seperator,undo,redo,seperator,spellchecker,";
                            }
                        });
                    }
        </script>
    <?php }     add_action( 'admin_head-post.php', 'tinymce_excerpt_js');     add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');     function tinymce_css(){ ?>
<br />
<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>
<p>
    <?php }
    add_action( 'admin_head-post.php', 'tinymce_css');
    add_action( 'admin_head-post-new.php', 'tinymce_css');

    function prepareExcerptForEdit($e){
        return nl2br($e);
    }
    add_action( 'excerpt_edit_pre','prepareExcerptForEdit');

Recently a customer wanted to add formatting to the excerpt field in WordPress posts.

There is a plugin called tinymce excerpt  but it doesn’t work any more in WordPress 3.4

I found this post by Kevin Chard that nearly solved the problem, but the editor didn’t show the linebreaks after loading the content because they were converted to n so I hooked a “nl2br()” before the excerpt was loaded in the editor.

To protect the page layout against the blog authors 😉 I customized the menu buttons in tinymce.

Here is the result you can copy and paste to your themes functions.php:

function tinymce_excerpt_js(){ ?&gt;<script type="text/javascript">// <![CDATA[
                jQuery(document).ready( tinymce_excerpt );
                    function tinymce_excerpt() {
                        jQuery("#excerpt").addClass("mceEditor");
                        tinyMCE.execCommand("mceAddControl", false, "excerpt");
                        tinyMCE.onAddEditor.add(function(mgr,ed) {
                            if(ed.id=="excerpt"){
                                ed.settings.theme_advanced_buttons2 ="";
                                ed.settings.theme_advanced_buttons1 = "bold,italic,underline,seperator,justifyleft,justifycenter,justifyright,separator,link,unlink,seperator,pastetext,pasteword,removeformat,seperator,undo,redo,seperator,spellchecker,";
                            }
                        });
                    }

// ]]></script><!--?php }     add_action( 'admin_head-post.php', 'tinymce_excerpt_js');     add_action( 'admin_head-post-new.php', 'tinymce_excerpt_js');     function tinymce_css(){ ?-->

<?php } add_action( ‘admin_head-post.php’, ‘tinymce_css’); add_action( ‘admin_head-post-new.php’, ‘tinymce_css’); function prepareExcerptForEdit($e){ return nl2br($e); } add_action( ‘excerpt_edit_pre’,’prepareExcerptForEdit’);