禁用CKEditor缩进插件

Question

I need to disable the indentation of ordered and unordered lists ( <ul> , <ol> ) in CKEditor (4.2 or 4.3) entirely, because i need to convert (a very limited subset of) HTML into another markup language which does not support indentation.

I've tried several approaches, but didn't have any luck:

Try 1: Remove plugin via configuration

config.removePlugins = 'indent,indentlist,indentblock';

I guess that is not working because these plugins seem to be required - you can't remove them when building a CKEditor package from the website.

When viewing CKEDITOR.plugins via the FireBug console, those plugins are still there. There doesn't even exist an own plugin folder - seems they are builtin to the core.

Try 2: Override TAB key

I created a new plugin disableTab that does entirely nothing (except return true; on execution).

The plugin is registered as a handler for keystroke of the TAB key:

config.keystrokes = [
     [ 9, 'disableTab' ] // disable TAB key to avoid nesting!
];

Unfortunately, the plugin doesn't work when pressing tab on the first level of a list ( <li> or <ol> ). Interestingly, it works when pressing TAB in the second level of a list ( ol > li > ol > li ), it does not produce more nested lists below the second level. I know for sure my plugin is executed, because i inserted an alert() in my plugin for testing. At least, this is what happens in my Firefox.

But i need to disable indentation entirely, not only above level > 2.

Try 3: Block keystroke via blockedKeystrokes in editor configuration:

Doesn't work, even though it should according to the documentation:

config.blockedKeystrokes = [ 9 ];

Try 4: Remove keystroke during runtime

According to the API documentation this code should disable the keystroke, but it doesn't work for some reason:

for (instance in CKEDITOR.instances) {
    var editor = CKEDITOR.instances[instance];
    editor.setKeystroke(9, false);
}

Any idea how to remove the indentation of lists in CKEditor?

I don't understand why none of these approaches work. If you know why, please let me know.

Update:

Interestingly, this code greets me for almost every key event, except pressing the TAB key:

editor.on('key', function(e) { alert ("hi"); return false; });

So it seems my setup (LinuxMint 13 [Gnome 2] + Firefox 18 + CKEditor 4.2) does not fire the key event handler for the TAB key. Maybe the indent plugin uses some other event? Blur?

Update 2:

This is a Firefox (maybe linux only) issue. Several approaches work fine with Chrome or Internet Explorer.

Answer 1

I just checked quickly and it looks like although indentlist is required by the list plugin, if you:

0) Download CKEditor sources from http://github.com/ckeditor/ckeditor-dev

1) Remove

requires: 'indentlist',

from plugins/list/plugin.js

2) Remove

indentlist: 1,  
indentblock: 1,

from dev/builder/build-config.js

3) Build release package with dev/builder/build.sh (on Windows use "Git Bash" shell)

You will find in the dev/builder/release/ckeditor folder the release version that you need.

(it's rather uncommon that a required plugin is not really required, but it's uncommon as well that one do not need indentation for lists ;-) )

Answer 2

try changing your code to:

editor = CKEDITOR.replace( 'element_name' );

editor.on('key', function(e) {
var key = e.data.keyCode;      
if(key==9) {
return false;
}

that should work, just change 'element_name' to the textarea that you are replacing with ckeditor

Answer 3

The built-in indentlist plugin cancels the event bubbling when it is processed, so a standard event listener for the tab key isn't being fired. If you prioritize your event to run first, you can capture the tab key event and stop it from indenting your lists.

Ex:

editor.on('key', function (evt) {
    if (editor.mode != 'wysiwyg') {
        return false;
    }

    if (evt.data.keyCode == this.indentKey || evt.data.keyCode == 9) {
        evt.cancel();
        return false;
    }
}, null, null, 1);

If you want to only block the indentation on numbered lists, you can add these conditionals:

editor.on('key', function (evt) {
    var path = editor.elementPath();

    if (editor.mode != 'wysiwyg') {
        return false;
    }

    if (evt.data.keyCode == this.indentKey || evt.data.keyCode == 9 && path.contains('ol')) {
        evt.cancel();
        return false;
    }
}, null, null, 1);

The event priority is outlined in the documentation here: https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_event.html#method-on