6

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?

  • 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 Mar 4 '16 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? – Mayeenul Islam Mar 4 '16 at 17:58
9

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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