snake555510
snake555510

Reputation: 81

Ckeditor Image Properties how to modify this tab

I am trying to customize the Image Properties section of CKEditor, but I don't know where to access the properties to modify it. I refer to this screen here:

enter image description here

The changes I seek are:

  1. make Upload default tab instead of Image Info
  2. Change Theme of this as it doesnt seem to use the skin I applied to actual rich text editor, as long as someone can point me to css behind it I can do the rest.
  3. Ability to actually modify width and height as they seem to be locked for some reason and I cant find property that handles it
  4. Set max width hard cap on images so they don't go above certain pixel amount.

I use Django Python for reference.

This is my custom config:

CKEDITOR_CONFIGS = {
'default': {
    'skin': 'light',
    'removeDialogTabs': 'image:Link;image:advanced;',
    'toolbar_Basic': [
        ['Source', '-', 'Bold', 'Italic']
    ],
    'toolbar_YourCustomToolbarConfig': [
        {'name': 'defaultstyle', 
         'items': ['Bold', 'Italic', 'Underline', 'Strike', 'TextColor', '-', 'Undo', 'Redo', '-', 
                    'Link', 'Unlink', 'Anchor', '-', 
                    'Image', 'Table', 'HorizontalRule', '-', 'Source', 
                     '-', 'Preview' ]},
        '/',
        {'name': 'paragraph',
         'items': ['NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-',
                   'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl',
                   'Language']},
        {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
    ],
    'toolbar': 'YourCustomToolbarConfig', 
    'width': 'auto',
    'height': 300,
    'tabSpaces': 2,
    'extraPlugins': ','.join([
        'uploadimage', 
        'div',
        'autolink',
        'autoembed',
        'embedsemantic',
        # 'devtools',
        'widget',
        'lineutils',
        'clipboard',
        'dialog',
        'dialogui',
        'elementspath'
    ]),
}

}

I render the editor as a form. Any answers to my questions greatly appreciate.

Upvotes: 0

Views: 333

Answers (0)

Related Questions