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:

enter image description here

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?

Sam R. · Accepted Answer · 2013-05-12T07:54:38.427

3

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
        }
    }
}

edited May 12 '13 at 07:54

answered May 11 '13 at 19:53

Sam R.

16,027
12
69
122

This is ugly trick that does not disable the highlighting, but hides it and it may stop to work in next versions, if some plugin developer changes the class name... – Marcin Skórzewski May 12 '13 at 06:42
@MarcinSkórzewski, This is a bug if you have the plugin disabled and they'll fix it. See the link above. – Sam R. May 12 '13 at 07:12
I see. @clone45 probably has chosen the plugin list in the `data-aloha-plugins` attribute. – Marcin Skórzewski May 12 '13 at 07:27
1

@MarcinSkórzewski, let him review your answer. Maybe you are right. But I recommended him to do this trick if _he is sure_ the plugin is disabled. – Sam R. May 12 '13 at 07:33
1

Hi guys, I switched over to using a different javascript package for inline editing. Thanks for all your feedback. – clone45 May 16 '13 at 19:32

score 1 · Answer 2 · answered May 12 '13 at 06:46

You should just not to load the plugin responsible for highlighting of the editables. Its name is "common/highlighteditables" and you customize which plugin you want to use with array in settings: Aloha.settings.plugins.load. Now, you are including it because you do not specify the plugin list and the default one is loaded.

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

2 Answers2