Django-ckeditor upload permission for all users; Add scroll bar; & automatically adjust editor width as per screen size

Question

Issue 1:

I am using Django-CKEditor and when I am trying to upload any file or image in it then it is showing Alert error: "Incorrect Server Response",

And when I checked in the terminal, there it is showing "GET /admin/login/?next=/ckeditor/upload/ HTTP/1.1"

I don't know what to do to make this work! Please help me here...

Issue 2:

when I am copy-pasting 100 lines of text in the editor it increases its height rather providing any scroll bar in it, here is the config code I am using:

    CKEDITOR_UPLOAD_PATH = 'uploads/'
    CKEDITOR_IMAGE_BACKEND = "pillow"

    CKEDITOR_CONFIGS = {
        'default': {
            'height': '200',
            'width': 1250,
            'toolbar_Basic': [
                ['Source', '-', 'Bold', 'Italic']
            ],
            'toolbar_YourCustomToolbarConfig': [
                {'name': 'document', 'items': ['Source']},
                {'name': 'clipboard', 'items': ['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo']},
                '/',
                {'name': 'basicstyles',
                 'items': ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'RemoveFormat']},
                {'name': 'paragraph',
                 'items': ['NumberedList', 'BulletedList', '-', 'Blockquote', '-',
                           'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl']},
                {'name': 'links', 'items': ['Link', 'Unlink', 'Anchor']},
                {'name': 'insert',
                 'items': ['Image', 'Table', 'SpecialChar']},
                '/',
                {'name': 'styles', 'items': ['Styles', 'Format', 'Font', 'FontSize']},
                {'name': 'colors', 'items': ['TextColor', 'BGColor']},
                {'name': 'tools', 'items': ['Maximize']},
            ],
            'toolbar': 'YourCustomToolbarConfig',  # put selected toolbar config here
            # 'toolbarGroups': [{ 'name': 'document', 'groups': [ 'mode', 'document', 'doctools' ] }],
            # 'height': 291,
            # 'width': '100%',
            # 'filebrowserWindowHeight': 725,
            # 'filebrowserWindowWidth': 940,
            # 'toolbarCanCollapse': True,
            # 'mathJaxLib': '//cdn.mathjax.org/mathjax/2.2-latest/MathJax.js?config=TeX-AMS_HTML',
            'tabSpaces': 4,
            'extraPlugins': ','.join([
                'uploadimage', # the upload image feature
                # your extra plugins here
                'div',
                'autolink',
                'autoembed',
                'embedsemantic',
                'autogrow',
                # 'devtools',
                'widget',
                'lineutils',
                'clipboard',
                'dialog',
                'dialogui',
                'elementspath'
            ]),
        }
    }

Urls.py

    path('ckeditor/', include('ckeditor_uploader.urls')),

models.py

    from django.db import models
    from ckeditor_uploader.fields import RichTextUploadingField

    class table_name(models.Model):
        update_message = RichTextUploadingField(blank=True, null=True)

        class Meta:
            db_table = "table_name"

Issue 3:

How to make the width of the editor to automatically adjust as per screen.

Answer 1

from ckeditor_uploader.fields import RichTextUploadingField

class Post(models.Model):
    content =RichTextUploadingField(null=False, blank=False, )


from ckeditor.widgets import CKEditorWidget

class AuthenticatedPostCreateForm(forms.ModelForm):
    content = forms.CharField(widget = CKEditorWidget(config_name='minimal'))


#editor Config settings.py
CKEDITOR_BASEPATH = "/static/ckeditor/ckeditor/"

CKEDITOR_UPLOAD_PATH = "uploads/"
CKEDITOR_CONFIGS = {
    'default': {
        'toolbar': 'full',
        'extraPlugins':','.join([
            'html5video','youtube',
        ]),
        'width': 'auto',
        'removePlugins':'exportpdf',
        'uploadUrl': '/ckeditor/upload/', 
        'filebrowserUploadUrl': '/ckeditor/upload/',
        'filebrowserImageUploadUrl': '/ckeditor/upload/?type=images',
    },
   #for USER Form
    'minimal': {
        'toolbar': [
            {'name': 'tools', 'items': ['Maximize']},
            {'name': 'insert', 'items': ['Image','Youtube']},
            {'name': 'basicstyles', 'items': ['Bold', 'Italic',]},
            {'name': 'tools', 'items': ['Save']},
            
        ],
        'extraPlugins':','.join([
            'html5video','youtube',
        ]),
         'width':'auto',
         'resize_enabled': True, 
        'removePlugins':'exportpdf',
        'uploadUrl': '/ckeditor/upload/', 
        'filebrowserUploadUrl': '/ckeditor/upload/',
        'filebrowserImageUploadUrl': '/ckeditor/upload/?type=images',
        'image2_alignClasses': ['image-align-left', 'image-align-center', 'image-align-right'],
        'image2_disableResizer': False,
       'contentsCss': ['/static/posts/css/ckeditor.css'],

    },
}

for admins only

 path('ckeditor/',include("ckeditor_uploader.urls")), 

for all users

    from django.contrib.auth.decorators import login_required
    from django.views.decorators.cache import never_cache
    from ckeditor_uploader import views as ckeditor_views

     path('ckeditor/upload/', login_required(ckeditor_views.upload), name='ckeditor_upload'),
     path('ckeditor/browse/', never_cache(login_required(ckeditor_views.browse)), name='ckeditor_browse'),

for all users even unauthenticated

from django.views.decorators.cache import never_cache
from ckeditor_uploader import views as ckeditor_views


path('ckeditor/upload/',ckeditor_views.upload, name='ckeditor_upload'),
path('ckeditor/browse/', never_cache(ckeditor_views.browse), name='ckeditor_browse'),

Answer 2

Issue 1: try to replace

path('ckeditor/', include('ckeditor_uploader.urls')),

in your urls.py with the following

    url(r'^ckeditor/upload/', login_required(ckeditor_views.upload), name='ckeditor_upload'),
    url(r'^ckeditor/browse/', never_cache(login_required(ckeditor_views.browse)), name='ckeditor_browse'),

also add the following in your urls.py

from django.contrib.auth.decorators import login_required
from django.views.decorators.cache import never_cache
from ckeditor_uploader import views as ckeditor_views

Issue 2: EDIT: you had an extraplugin "autogrow" and wrong height setting.

step 1: remove "autogrow";

step 2: replace

'height': '200',

with 'height':'200px', or 'height':200,

Issue 3: replace

'width': 1250,

with

'width': '100%',

and in your html and css, make the div containing the ckeditor form to be responsive. Note please pay special attention to ' ' in your code. I see you commented out lines that have correct settings for width and height.