Each image have to only be in a <div class="ed_fullwidth_image">
tag
but if you click on edtor button for more than 1 time
editor code are like this :
Editor Code in 3 click on editor custom button :
<div class="ed_fullwidth_image">
<div class="ed_fullwidth_image">
<div class="ed_fullwidth_image"><img class="alignnone size-medium wp-image-318" src="http://localhost/wordpress/wp-content/uploads/2015/07/eagle-design.ir_-300x100.jpg" alt="" width="300" height="100" />
</div>
</div>
</div>
it should be like this :
<div class="ed_fullwidth_image">
<img class="alignnone size-medium wp-image-318" src="http://localhost/wordpress/wp-content/uploads/2015/07/eagle-design.ir_-300x100.jpg" alt="" width="300" height="100" />
</div>
i put the full codes here
The js codes :
(function() {
tinymce.create("tinymce.plugins.afflpad", {
init: function(ed, url) {
ed.addCommand("afflpad_click", function(e) {
// check if is image
if (ed.selection.getContent().indexOf('src=') > -1) {
ed.selection.setContent('<div class="ed_fullwidth_image">' + ed.selection.getContent() + "</div>")
ed.selection.setContent("n")
}
});
ed.addButton("afflpad_button", {
title: "Affiliate Link",
cmd: "afflpad_click",
icon: "dfw",
text: "تصÙÛر تÙ
اÙ
عرض",
});
},
getInfo: function() {
return {
longname: "Affiliate links",
author: "NAME",
authorurl: "HOMEPAGE",
infourl: "HOMEPAGE",
version: tinymce.majorVersion + "." + tinymce.minorVersion
};
}
});
tinymce.PluginManager.add("afflpad", tinymce.plugins.afflpad);
})();
php (wordpress):
function afflpad_mce_buttonhooks() {
if(current_user_can("edit_posts") && current_user_can("edit_pages") && get_user_option("rich_editing") == "true") {
add_filter("mce_external_plugins", "afflpad_register_tinymce_javascript");
add_filter("mce_buttons", "afflpad_register_mce_buttons");
}
}
add_action("init", "afflpad_mce_buttonhooks");
function afflpad_register_tinymce_javascript($plugin_array) {
$plugin_array["afflpad"] = (get_bloginfo('template_directory').'/js/editor-script.js');
return $plugin_array;
}
function afflpad_register_mce_buttons($buttons) {
array_push($buttons, "|", "afflpad_button");
return $buttons;
}
add_filter('mce_css', 'tuts_mcekit_editor_style');
function tuts_mcekit_editor_style($url) {
if ( !empty($url) )
$url .= ',';
$url .= (get_bloginfo('template_directory').'/editor-styles.css');
return $url;
}
Solution in plain JavaScript: