Check parent class in wordpress editor

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 :

Read More

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;
}

Related posts

1 comment

  1. Solution in plain JavaScript:

    //add hasClass function to element prototype
    Element.prototype.hasClass = function(className) {
        return this.className && new RegExp("(^|\s)" + className + "(\s|$)").test(this.className);
    };
    
    document.body.onmouseup = function() {
       //check if selected text parent has class
       if(window.getSelection().anchorNode.parentNode.hasClass("post-text")) {
       //parent has the class, do what you want
          alert("has")
       } else {
       //false, do another thing
          alert("no")
       }
    }
    

Comments are closed.