tinymce is not defined when not using wp_editor

by myol   Last Updated October 03, 2018 16:08 PM

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());

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="//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());

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.

Answers 3

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='{$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);

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.


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);
January 27, 2015 19:50 PM

For what it's worth - I recently ran into this problem with the editor disappearing with wp 4.1 after a site migration. The issue happened to be that "accessibility mode" (The link under screen options in the widget editor) was turned on.

February 19, 2015 13:33 PM

My problem was wordpress was not including the tinymce script tag because user_can_richedit() was returning false (I did not investigate why. My user is an admin, and it was previously working on a different install, so maybe some setting controls it?). In any case, you can filter the return value of user_can_richedit() to get wordpress to include the tinymce scripts and then tinymce will be defined.

add_filter('user_can_richedit', '__return_true');
Luke Chinworth
Luke Chinworth
October 03, 2018 15:47 PM

Related Questions

Use js script from one plugin in another plugin

Updated November 12, 2017 06:08 AM

Fancybox 3 and Wordpress

Updated April 20, 2017 23:08 PM

Can't move jQuery to footer

Updated July 11, 2017 16:08 PM