I am using jQuery tinyMCE to populate dynamically generated text areas with tiny MCE editors.

When I use the WordPress wp_editor function before I call the jQuery version, I have no issues. If I do not, I get;

Uncaught ReferenceError: tinymce is not defined

As a dreadful hack, I have used;

wp_editor('hacky', 'hackhack');

wp_register_script('admin_js', get_template_directory_uri() . '/assets/js/admin.min.js', array());
wp_enqueue_script('admin_js');

Which allows the jQuery TinyMCE to work. I wish to eliminate this. Thinking WP wasn’t loading the jQuery version (and not knowing a good way to get the path of WP-includes) I used;

?><script type="text/javascript"src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.1.7/jquery.tinymce.min.js"></script><?php

wp_register_script('admin_js', get_template_directory_uri() . '/assets/js/admin.min.js', array());
wp_enqueue_script('admin_js');

But this doesn’t seem to be the issue. It seems that the WP version loads the required files I need – except I do not know what files I need.

5 s
5

With help from a colleague, we dug through class-wp-editor.php

Here are the necessary scripts to initialise jQuery tinyMCE if wp_editor has not been used beforehand (which calls these scripts).

// Get the necessary scripts to launch tinymce
$baseurl = includes_url( 'js/tinymce' );
$cssurl = includes_url('css/');

global $tinymce_version, $concatenate_scripts, $compress_scripts;

$version = 'ver=" . $tinymce_version;
$css = $cssurl . "editor.css';

$compressed = $compress_scripts && $concatenate_scripts && isset($_SERVER['HTTP_ACCEPT_ENCODING'])
    && false !== stripos($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip');

if ( $compressed ) {
    echo "<script type="text/javascript" src="https://wordpress.stackexchange.com/questions/175307/{$baseurl}/wp-tinymce.php?c=1&amp;$version"></script>\n";
} else {
    echo "<script type="text/javascript" src="{$baseurl}/tinymce.min.js?$version"></script>\n";
    echo "<script type="text/javascript" src="{$baseurl}/plugins/compat3x/plugin.min.js?$version"></script>\n";
}

add_action( 'wp_print_footer_scripts', array( '_WP_Editors', 'editor_js' ), 50 );
add_action( 'wp_print_footer_scripts', array( '_WP_Editors', 'enqueue_scripts' ), 1 );

wp_register_style('tinymce_css', $css);
wp_enqueue_style('tinymce_css');

This will create a dynamic tinyMCE editor without the tabs to switch between visual / text, nor the media upload functionality. I had to create these buttons manually as well as the respective jQuery for each.

Edited in the required css the editor uses as well.

EDIT:

More elegant solution but with less fallback (no versioning)

$js_src = includes_url('js/tinymce/') . 'tinymce.min.js';
$css_src = includes_url('css/') . 'editor.css';

// wp_enqueue doesn't seem to work at all
echo '<script src="' . $js_src . '" type="text/javascript"></script>';

wp_register_style('tinymce_css', $css_src);
wp_enqueue_style('tinymce_css');

Leave a Reply

Your email address will not be published. Required fields are marked *