Search code examples
aloha-editor

Remove Aloha-Editor Blue Focus Outline

I'm very new to Aloha (WYSIWYG) Editor and i would like to know how to remove/disable its blue outline then the editing field is on focus.

I've managed to disable the yellow highlight outlines, but couldn't find a way to disable the blue on focus border outline.

Any friendly advice?

Thanks.

Solution

  • This blue outline is made by the "highlighteditables" plugin's CSS src/plugins/common/highlighteditables/css/highlighteditables.css:

    .aloha-editable-active, .aloha-editable-active[contenteditable=true]:focus {
    outline: #80B5F2 solid 5px !important;
}

    Check that when running the inspector in the web browser, selecting the element and disabling this style helps.

    Note the ugly programming style with !important :(

    Unfortunately, as you can can choose plugins to load you only choose JavaScript, CSS of all the plugins enabled during the build are merged into the aloha.css and are always loaded.

    One way to fix it is to build the editor yourself. Basic introduction is described in section "4.3 Customized Builds" of Develop Aloha Editor guide.

    As building Aloha yourself requires some effort, you may be interested in quick workaround using the inline style:

    outline: none !important;

    for the element you have problem with. Note the !important keyword - it is required.