How to display TinyMCE without wp_editor()

Question

I'm trying to enable WordPress' tinyMCE editor for a front-end textarea, from a plugin's pro version.

I temporarily solved the issue in a bogus way:

In free version:

wp_editor(
   $details_val,    //content
   'pre-details',   //editor ID
   array('tinymce'=>false),
);

Then from the pro version, with a filter hook, made the 'tinymce' value to true. Ha ha ha...

Need a viable solution

Here's my textarea on front end:

<textarea class="tinymce-enabled" rows="5" cols="40" name="pre_details" id="pre-details"><?php echo $details_val; ?></textarea>

I tried the following function in jQuery:

jQuery(document).ready(function($) {
    tinymce.init({
        selector :"pre-details",
        mode : "specific_textareas",
        theme : "simple",
        editor_selector :"tinymce-enabled"
    });
});

And the files are called in the following fashion:

function pre_scripts() {
    if( is_page('xyz') ) {
        wp_enqueue_script( 'pre-scripts', Pre()->plugin_url() .'/assets/js/pre-scripts.min.js', array('jquery', 'tiny_mce'), Pre()->version, true );
    }
}
add_action( 'wp_enqueue_scripts', 'pre_scripts' );

First of all, if I don't use the 'tiny_mce' dependency the tinymce.init() shows an error of not finding such function, but my custom script loads. But if I add the 'tiny_mce' dependency, my custom script doesn't even load. But the hook is mentioned in dev resources.

I found this WPSE thread, that suggests it's an age-old problem. But the workaround represented there, doesn't solve my problem.

I also tried different versions:

$(function() {
   $('textarea.tinymce-enabled').tinymce({
        mode : "specific_textareas",
        theme : "simple", 
   });
});

and

tinyMCE.execCommand('mceAddControl', false, 'pre-details');

But no luck. Because that dependency dequeues my script,
or, the alternative methods of loading the tinymce core scripts doesn't comply with my scripts.

How can I load the WordPress' tinyMCE Rich Text editor to a textarea on frontend without using wp_editor(), but in a pluggable way?

Answer 1

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.