Wordpress: add events inside TinyMCE iframe - php

Question

I've added some div wrapper styles to Wordpress, but when I use them in the page, it is impossible to add content below them in the page. CSS:after works inside the divs to create a selectable area, but it doesn't work to create a selectable area after the div.
In my functions.php I have:
function my_mce_before_init( $settings ) {
$style_formats = array(
array(
'title' => 'Box Two Columns',
'block' => 'div',
'classes' => 'twocolbox',
'wrapper' => true
),
array(
'title' => 'Image with Caption',
'block' => 'div',
'classes' => 'img_caption',
'wrapper' => true
),
array(
'title' => 'Gallery Horizontal',
'block' => 'div',
'classes' => 'scroller horizontal',
'wrapper' => true
)
);
$settings['style_formats'] = json_encode( $style_formats );
return $settings;
}
add_filter('tiny_mce_before_init', 'my_mce_before_init');
add_editor_style();
Is there a way to use execCommand here to add some html after the div styles I defined? To add something like an empty paragraph tag afterwards with a clear float?
I tried:
tinyMCE.execCommand('mceInsertContent',false,'Hello world!!');"
MCE editor breaks then.
...
Tried this but it's too buggy:
In editor-styles.css:
#tinyMCE:after {
content: " ";
clear:both;
width: 4em; height:4em;
}
Note that you may need to clear cache AND shift-reload button to see any changes to editor-styles.css in Wordpress.
...
Still working on this. Found a thread:
To access tinymce iframe elements through jquery
I tried adding the code in this thread to my_mce_before_init, but it just broke.
....
Also tried loading a jQuery script, but the target paths wouldn't work on the TinyMCE iframe. None of these selectors work:
jQuery(document).ready(function($) {
$("#tinyMCE").find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("div").css("color","red");
$("#content_ifr").contents().find("div").after('<p style="width:100%; clear:both; height:1em;"> 6789</p>');
$("#content_ifr").contents().find("#tinymce p").css("color","red");
$("#wp-content-editor-container").find("textarea").css("color","red");
$("iframe").contents().find("p").css("color","red");
$('#content_ifr').load(function(){
$('#content_ifr').contents().find('p').css("color","red");
});
});

Answer 1

You can add html pseudo elements using the tinymce configuration option content_css.
There you can define after elements. Give it a try!
Update:
When initializing tinymce set the setup paramter to the following (inside tinyMCE.init({...})
...
theme: "advanced", // example param
setup : function(ed) {
ed.onInit.add(function(ed, evt) {
$("#content_ifr").contents().find("p").css("color","red");
// other approach
//$(ed.getBody()).find('p').css("color","red");
});
},
cleanup: true, // example param
...