I required a lot more code to get it working, and also was getting a javascript error: Deprecated TinyMCE API call: <target>.onKeyUp.add(..)
This was caused by a wordpress upgrade from 3.x to 4. So I had to clear my browser cache
first.
Firstly I added a callback to teh wp filter tiny_mce_before_init
in my functions.php file, this allowed to me to add a js callback function to be fired when the editors are initialised:
add_filter( 'tiny_mce_before_init', array( $obj, 'filter_cb_mce_before_init' ) );
/**
* Filter cb to add event listeners to tinymce editor.
* @param array $init An array of setup js functions as strings.
* @return array Returns new array of js function strings.
*/
function filter_cb_mce_before_init( array $init ) {
$init['setup'] = "function(ed){
if(get_tinymce_content) //not required, I use it as flag to check if on correct page
ed.on('change', function(){ get_tinymce_content() });
}";
return $init;
}
Next the javascript function to do what ever is wanted with the content when it changes. Add this javascript using wp_enqueue_scripts to the page you want.
/**
* Get the content of the tinyMCE editor.
* @link http://wordpress.stackexchange.com/questions/42652/how-to-get-the-input-of-a-tinymce-editor-when-using-on-the-front-end
* @return {string} Returns the content
*/
function get_tinymce_content(){
//change to name of editor set in wp_editor()
var editorID = 'my_editor_id';
if (jQuery('#wp-'+editorID+'-wrap').hasClass("tmce-active"))
var content = tinyMCE.get(editorID).getContent({format : 'raw'});
else
var content = jQuery('#'+editorID).val();
console.log(content);
}
The code worked when I used the following to print the editor to any page:
<?php wp_editor( @$event->description, 'my_editor_id', array(
'media_buttons' => false,
'textarea_name' => 'data[description]',
'quicktags' => array("buttons"=>"link,img,close"),
) ); ?>
val()