Customer reports an issue about CKEditor disabling the indent button. At first glance, I thought it was by default. User needs to select some text and converts it to a list to use this functionality. Later, I found the editor in CKEdtior’s official site doesn’t have the issue at all!

It turns out you need to enable this by installing 2 plugins: indent and indentblock. This is something changed in 4.2. Actually it’s already included in the ckeditor build we’re using. You can check that by finding keyword “indent” and “indentblock” in ckeditor.js.

However, this still doesn’t work for me. It took me an hour to find out the root cause. For legacy issue, we set entermode to div, default is p, and another option is br. Below is the code which makes the button disabled.

this.requiredContent = (this.enterBr ? "div" : "p") + (d ? "(" + d.join(",") + ")" : "{margin-left}");

It seems as long as entermode is not br, it’s using p. That’s incorrect. divMode should also use div as requiredContent.

this.enterBr = a.config.enterMode == CKEDITOR.ENTER_BR;

refined to

this.enterBr = a.config.enterMode == CKEDITOR.ENTER_BR||a.config.enterMode == CKEDITOR.ENTER_DIV;

After this, the button will be enabled. Adding margin-left will not be removed in div by ckeditor.