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.
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&$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');