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:

   $details_val,    //content
   'pre-details',   //editor ID

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($) {
        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() {
        mode : "specific_textareas",
        theme : "simple", 


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?

  • What is it about wp_editor() that you're trying to get rid of? Why do you need to break the tinyMCE out of wp_editor(). It sounds like you're doing some kind of premium features. You could use wp_eidtor() to remove all the buttons and tabs so the user just sees a normal textbox. I'm just speculating on what you need from it though.
    – Howdy_McGee
    Commented Mar 4, 2016 at 17:45
  • @Howdy_McGee I already said that, please refer to the very beginning of my question, array('tinymce'=>false). To me it's a numb way implementing a pro feature. Anyone with a basic knowledge of WordPress can do a simple filter like return true and they can enable tinymce on a wp_editor() field. I think it's not a smart way. How do you people offer rich text support on pro version, while giving a simple textarea on free version? Commented Mar 4, 2016 at 17:58

1 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.

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, " " );
    } );
} );

to get content


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.


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.