How to display TinyMCE without wp_editor()

If you don’t need wp_editor in front-end, I think its OK. Here a little bit different option settings with your tinymce init. I use this without wp_editor in front-end.

<script>
jQuery( document ).ready( function( $ ) {
    tinymce.init( {
        mode : "exact",
        elements : 'pre-details',
        theme: "modern",
        skin: "lightgray",
        menubar : false,
        statusbar : false,
        toolbar: [
            "bold italic | alignleft aligncenter alignright | bullist numlist outdent indent | undo redo"
        ],
        plugins : "paste",
        paste_auto_cleanup_on_paste : true,
        paste_postprocess : function( pl, o ) {
            o.node.innerHTML = o.node.innerHTML.replace( /&nbsp;+/ig, " " );
        }
    } );
} );
</script>

to get content

tinymce.get('pre-details').getContent()

In WP function wp_enqueue_scripts

wp_enqueue_script( 'tinymce_js', includes_url( 'js/tinymce/' ) . 'wp-tinymce.php', array( 'jquery' ), false, true );

You can enqueue editor.min.css for your style.

Leave a Comment