javascript - 在 WordPress 编辑器中检查父类

Question

每个图像只能位于 <div class="ed_fullwidth_image"> 中标签

但是如果您点击编辑器按钮超过 1 次编辑器代码如下:

编辑代码 3 单击编辑器自定义按钮:

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

应该是这样的:

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

我把完整的代码放在这里

js代码:

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

Answer 1

纯 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")
   }
}