Custom Field Suite – Adding tinyMCE On The Frontend To Content Textarea

Updates to WordPress core broke several plugins that relied on tinyMce for the frontend content field.  The update WordPress core code stripped out the ‘tmce-active’ class from the fields and tinyMce initialization.  The workaround until plugins address this is to manually add the class (via jQuery) and initiate tinyMce separately.

To do this, add the following code to your affected pages

<script>
jQuery(document).ready(function($) {
    //  Change .wp-editor-wrap to your textarea class or ID name
    $( '.wp-editor-wrap ' ).removeClass( 'html-active' ).addClass( 'tmce-active' );
});
</script>

Then, you will need to initialize tinyMce.  You can do this a number of ways, but the quick and dirty solution is to add the following:

<script src="//cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.1/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({
    selector: 'textarea',
  height: 200,
  menubar: false,
  plugins: ["lists"],
  toolbar: 'bold italic underline bullist numlist outdent indent',

});
</script>