How to remove yellow borders from editable content in the Aloha Editor javascript plugin?

Question

I'm struggling with customizing the Aloha Editor. I'd like to remove the yellow borders around the editable content:

In Github, the same question was asked, and the answer given was,

the highlight plugin shows the user editable areas when he moves the mouse. If you don’t want to use it just don’t include. Or do your own highlight plugin...

However, I don't believe that I'm including the highlight plugin. My Aloha settings looks like this:

Aloha.settings = {
    locale: 'en',
    plugins: {
        format: {
            config: [  'b', 'i', 'sub', 'sup', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6' ],
            editables : {
                '#title'    : [ ] // no formatting allowed for title
            }
        }
    },
    sidebar: {
        disabled: true
    }
};

Any suggestions?

Answer 1

If you are sure that HighlightEditables plugin is disabled then you're probably facing this bug. As suggested by issue opener you may try removing !important from CSS:

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

---

Update:

As a reply to @Marcin's concern, please make sure that you don't have common/highlighteditables in data-aloha-plugins attribute of your Aloha <script> tag:

<script src="javascripts/aloha/aloha.js"
  data-aloha-plugins="common/format, common/link"> // HERE
</script>

Here is the corresponding configuration:

Aloha.settings.plugins: {
    highlighteditables: {
        config: [ 'highlight' ],

        editables: {
            '#one': [ 'highlight' ],
            '#two': [ ] // do not show visual effect for this editable
        }
    }
}