Difficulties modifying style dropdown due to use of AlloyEditor.Strings

[dantman]

Changing the list of styles in the style dropdown (Normal, Header 1-2, Formatted, ...) is difficult.

The config you use is understandable, in toolbars.styles.selections[name: 'text'].buttons[] config instead of 'styles' you pass { name: 'styles', cfg: { styles: styles } } where styles is an array that matches the default array in _getStyles modified to suit your needs.

[
    {
        name: AlloyEditor.Strings.h1,
        style: {
            element: 'h1'
        }
    },
    {
        name: AlloyEditor.Strings.h2,
        style: {
            element: 'h2'
        }
    },
    {
        name: AlloyEditor.Strings.formatted,
        style: {
            element: 'pre'
        }
    },
    {
        name: AlloyEditor.Strings.cite,
        style: {
            element: 'cite'
        }
    },
    {
        name: AlloyEditor.Strings.code,
        style: {
            element: 'code'
        }
    }
]

The problem is AlloyEditor.Strings. At the time you pass config AlloyEditor.Strings isn't filled. In fact, AlloyEditor doesn't trigger the loading of the necessary lang data until after you create an AlloyEditor.Core instance using the AlloyEditor.editable function you're supposed to pass the config to. And if you leave these out of the config, then your styles list has no text.

[ipeychev]

Hey @dantman,

We will make code changes so you will be able to force AlloyEditor to load the language resources and once they are being loaded, to create an instance of AlloyEditor.
Hope that will resolve the issue, but please let me know if that won't work for you.

[dantman]

Sure. I'm doing exactly that right now, but in an unsupported way by calling AlloyEditor.Core.prototype._loadLanguageFile(); (which doesn't actually require a valid this to work) and listening for resourcesLoaded on CKEDITOR.

[ipeychev]

Hey @dantman,

Now you will be able to do the following:

AlloyEditor.loadLanguageResources(function() {
    var editor = AlloyEditor.editable('editable');
});

Hope that helps!