How to rename existing styles in CKEditor?

In my webpage we'll only allow users to use H3 and H4, but it's confusing to see these as "Title 3" and "Title 4". I wanted to rename these as "Title" and "Subtitle", but setting format_h3.name doesn't seem to affect that.

I can't write custom JS to configure the editor as I'm using a Django Plugin, that actually converts a python dictionary into the final JSON config used.

The relevant part of what I tried is as follows:

CKEDITOR_CONFIGS = {
    'default': {
        'allowedContent': 'h3 h4 p b i u a[*]',
        'format_p': {'name': 'Standard text', 'element': 'p'},
        'format_h3': {'name': 'Title', 'element': 'h3'},
        'format_h4': {'name': 'Subtitle', 'element': 'h4'},
        'toolbar': [
            {'name': 'styles', 'items': ['Format']},
            {'name': 'basicstyles', 'items': ['Bold', 'Italic', 'Underline', '-', 'RemoveFormat']},
            {'name': 'links', 'items': ['Link', 'Unlink']},
        ]
    }
}

Solution 1:

Unfortunately there is no ability to change formats names in CKEditor via configuration. I've filled a feature request for that.

However if you are able to modify editor's files, you could always alter language entries directly, located in plugins/format/lang/<language>.js.

The second workaround is to modify format plugin source, especially init function:

init: function() {
    this.startGroup( lang.panelTitle );

    for ( var tag in styles ) {
        var label = config[ 'format_' + tag ] && config[ 'format_' + tag ].name || lang[ 'tag_' + tag ];

        // Add the tag entry to the panel list.
        this.add( tag, styles[ tag ].buildPreview( label ), label );
    }
}