无法自定义django-ckeditor工具栏

Question

I'm trying to customise a django-ckeditor toolbar.

My model field is:

answer = RichTextField(
    verbose_name    = "Answer presented to user",
    config_name     = 'answer_ckeditor',
    )

Within settings.py I have

CKEDITOR_CONFIGS = {
    'answer_ckeditor': {
        'skin': 'moono',
        #'skin': 'office2013',
        'toolbar': [
            {'name': 'basicstyles',
             'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
            {'name': 'paragraph',
             'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                       'Language']},
            {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
            {'name': 'colors', 'items': ['TextColor', 'BGColor']},
        ],
    }
}

My HTML is:

<textarea id="answer_1" name="answer_1" required class="form-control quiz-search-box" placeholder="Option 1"></textarea>
<script>
    CKEDITOR.replace( 'answer_1' );
</script>

I just get the standard ckeditor menu. I've tried using default and removing the config_name from the field definition but no difference.

Is there something different I need to do in the JavaScript CKEDITOR.replace( 'answer_1' ); to get it to pick up my toolbar?

Answer 1

Here's my solution.

I changed CKEDITOR.replace( 'answer_1' ); to CKEDITOR.replace( 'answer_1', {customConfig: "{% static 'js/custom/config.js' %}"});

The config.js file looks like:

CKEDITOR.editorConfig = function( config ) {
    config.toolbarGroups = [
        { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
        { name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi', 'paragraph' ] },
        { name: 'styles', groups: [ 'styles' ] },
        { name: 'colors', groups: [ 'colors' ] },
    ];

    config.removeButtons = 'Underline,Subscript,Superscript,Cut,Undo,Scayt,Link,Image,Maximize,Source,About';
};

It's working so I'm satisfied.

Answer 2

Have you tried it like the documentation ?

CKEDITOR_CONFIGS = {
    'answer_ckeditor': {
        'skin': 'moono',
        #'skin': 'office2013',
        'toolbar': 'Custom',
        'toolbar_Custom': [
            ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat'],
            ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                       'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                       'Language'],
            ['Styles', 'Format', 'Font', 'FontSize'],
            ['TextColor', 'BGColor']
        ]
    }
}