CODEWITHSUNDEEP
ckeditor
Irina
Irina

Reputation: 784

How to disable CKEditor context menu for certain elements?

I have some <div> elements with special classes and I want them to be disallowed for edit through the context menu. Is there a way to do so? I tried:

CKEDITOR.dtd.$nonEditable = "div(myclass)";

and

allowedContent: {
                    $1: {
                        elements: CKEDITOR.dtd,
                        attributes: true,
                        styles: true,
                        classes: true
                    }
                },
                disallowedContent: "div(myclass)",

I also tried to exclude <div> from menu_groups: '';, but I can't exclude <div>'s with certain classes, only all.

enter image description here

PS: I need to keep the contextmenu plugin, just remove it for certain elements.

Upvotes: 0

Views: 613

Answers (1)

Yasar
Yasar

Reputation: 11

I have using if and Conditional (ternary) operator method to hide and disable the context menu items access

Method 1: This condition not disply the contextMenu items while right click

Method 2: This condition disable the contextMenu items functions TRISTATE_OFF ||TRISTATE_DISABLED || Conditional_Operator

var editor = CKEDITOR.appendTo('editorSpace', { toolbar: [] });
editor.on( 'instanceReady', function(e) { 
   editor.resize(200, 200); 
   editor.addCommand("myCommandEdit", {
        exec : function( editor ){          
         alert("Edit DIV"); // write your own function
      }});
   editor.addCommand("myCommandRemove", {
        exec : function( editor ){alert("Div Removed");}
    }); 
    // Listener 
  editor.contextMenu.addListener(function(element, selection ) {
  var ascendant = element.getAscendant( 'div' );
  var divCondtion = ascendant.getAttribute('class') != 'myclass';
  // Method 1
    if(divCondtion){
    return { 
        div_Edit : CKEDITOR.TRISTATE_OFF,
        div_Remove : CKEDITOR.TRISTATE_OFF 
     };
    }
  // Method 2

return { 
    div_Edit: divCondtion ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED,
   div_Remove: divCondtion ? CKEDITOR.TRISTATE_OFF : CKEDITOR.TRISTATE_DISABLED
    };      
});

editor.addMenuItems({
 div_Edit : {
      label : 'Edit DIV',
      command : 'myCommandEdit',
      group : 'DivEditGroup',
      order : 1
   },
   div_Remove : {
      label : 'Remove DIV',
      command : 'myCommandRemove',
      group : 'DivEditGroup',
      order : 2
   }
});

});

Upvotes: 1

Related Questions