Search code examples
javascriptckeditorwysiwyg

How to disable / enable button when in CKEditor when source function is on?

When using the source function in CKEditor, some buttons (usually those related to style) are disabled while some button are still available (usually those not related to style) The following is a screenshot of the official demo showing what is disabled and what is not.

enter image description here

I am writing a few custom plugin following the official guide with some twist of my own. Some of them, like adding abbreviation in the official guide, should be enabled even in source mode, while some other related to style should be disabled. The problem is, where should I set such behavior?

Solution

  • Usemodes property.

    editor.addCommand('foo', new CKEDITOR.dialogCommand('fooDialog'));
editor.commands.foo.modes = { wysiwyg: 1, source: 1 };

    or

    editor.addCommand('foo', {
    modes: { wysiwyg: 1, source: 1 },
    //...
});

    More info:

    https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_command.html#property-modes https://docs.ckeditor.com/ckeditor4/latest/api/CKEDITOR_commandDefinition.html#property-modes