Forums

ckeditor has installed but not working

I have installed ckeditor and done all settings same as what is in this post :

https://www.pythonanywhere.com/forums/topic/11923/

but i dont know why instead of RichTextUploadingField I have just a simple text area ? is there anything i missed ?

Use your browser developer tools to make sure that the assets (javascript files and css) that are necessary are actually being delivered to the browser.

I want to have ckeditor in the admin page, where should i add the javascript and css pathes?

What errors do you see in the browser developer tools when you try to access a page that should be showing the rich editor?

Loading failed for the <script> with source “http://zg500.pythonanywhere.com/static/ckeditor/ckeditor-init.js”. 2:19 Loading failed for the <script> with source “http://zg500.pythonanywhere.com/static/ckeditor/ckeditor/ckeditor.js”.

OK. And have you run python manage.py collectstatic since you added the ckeditor stuff to your settings.py? If so, did it display any errors?

yes i did, it had some errors which i think they are just some warnings and not important (arent they?) and also they are irrelevant to ckeditor

You have requested to collect static files at the destination
location as specified in your settings:
 /home/zg500/zg500.pythonanywhere.com/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
 Found another file with the destination path 'autocomplete_light/jquery.init.js'. It will be ignored since only the  first encountered file is collec
 ted. If this is not what you want, make sure every static file has a unique path.
 Found another file with the destination path 'autocomplete_light/autocomplete.init.js'. It will be ignored since   only the first encountered file is 
 collected. If this is not what you want, make sure every static file has a unique path.
 Found another file with the destination path 'autocomplete_light/select2.css'. It will be ignored since only the   first encountered file is collected
. If this is not what you want, make sure every static file has a unique path.
 Found another file with the destination path 'autocomplete_light/select2.js'. It will be ignored since only the first     encountered file is collected.
 If this is not what you want, make sure every static file has a unique path.
0 static files copied to '/home/zg500/zg500.pythonanywhere.com/static', 1448 unmodified.

Agreed, those errors are ones that you should be able to ignore. However, there is a clue as to what the problem is in the output. It says:

You have requested to collect static files at the destination
location as specified in your settings:
 /home/zg500/zg500.pythonanywhere.com/static

However, the static file mapping you have for /static/ on the web page is /home/zg500/zg500.pythonanywhere.com/BallbearingSite/static, which is different -- note the extra BallbearingSite/

What value do you have for STATIC_ROOT in your settings.py?

settings.py :

BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

STATIC_URL = '/static/'
STATIC_ROOT = 'static/'

MEDIA_URL  = '/media/'
MEDIA_ROOT = 'media/'

I changed the static file mapping on the web page to /home/zg500/zg500.pythonanywhere.com/static and the ckeditor in admin page is ok now but the ckeditor on my template still not showing ! im confused why should the static address be this: /home/zg500/zg500.pythonanywhere.com/static while my static folder on my local was in /BallbearingSite/static, and when i deployed the site i made all changes of style.ss (like font ,...) on this path and they are executed.

The problem is that your settings file is saying that all static files should be in the "static" subdirectory of whatever the website's current working directory happens to be, and this changes depending on where you're running your code from. You should specify STATIC_ROOT like this:

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

...and MEDIA_ROOT like this:

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

...and delete the lines that say

STATIC_ROOT = 'static/'

...and

MEDIA_ROOT = 'media/'

Once you've done that, it will mean that all of the static and media files are put into the right place. Run python manage.py collectstatic again to put the static files there, and move all of the files that are in /home/zg500/zg500.pythonanywhere.com/media to /home/zg500/zg500.pythonanywhere.com/BallbearingSite/media, and change your static file mapping for /static/ on the "Web" tab back to point to /home/zg500/zg500.pythonanywhere.com/BallbearingSite/static, and add one from /media to /home/zg500/zg500.pythonanywhere.com/BallbearingSite/media, and everything should work fine.

when i did the changes above, the ckeditor stopped working again :(

all pictures still saves in " /home/zg500/zg500.pythonanywhere.com/media "

and not in" /home/zg500/zg500.pythonanywhere.com/BallbearingSite/media" which i made

and the "python manage.py collectstati" messages are same as before :

You have requested to collect static files at the destination
 location as specified in your settings:
  /home/zg500/zg500.pythonanywhere.com/static
This will overwrite existing files!
  Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
  Found another file with the destination path 'autocomplete_light/jquery.init.js'. It will be ignored since only the     first encountered file is collec
ted. If this is not what you want, make sure every static file has a unique path.
Found another file with the destination path 'autocomplete_light/autocomplete.init.js'. It will be ignored since only the first encountered file is 
collected. If this is not what you want, make sure every static file has a unique path.
 Found another file with the destination path 'autocomplete_light/select2.css'. It will be ignored since only the    first encountered file is collected
. If this is not what you want, make sure every static file has a unique path.
 Found another file with the destination path 'autocomplete_light/select2.js'. It will be ignored since only the first   encountered file is collected.
 If this is not what you want, make sure every static file has a unique path.      0 static files copied to '/home/zg500/zg500.pythonanywhere.com/static', 1451 unmodified.

OK, could you change your static files mapping on the "Web" tab to point to /home/zg500/zg500.pythonanywhere.com/media and /home/zg500/zg500.pythonanywhere.com/static, and move the files back from /home/zg500/zg500.pythonanywhere.com/BallbearingSite/media to /home/zg500/zg500.pythonanywhere.com/media, then run collectstatic and see if that helps?

and move the files back from /home/zg500/zg500.pythonanywhere.com/BallbearingSite/media to /home/zg500/zg500.pythonanywhere.com/media,

I didnt delete the media folder and files in it and i made another one, so i have two media folder in both path :

 /home/zg500/zg500.pythonanywhere.com/BallbearingSite/media   
 /home/zg500/zg500.pythonanywhere.com/media

so it is not needed to move files back .

and i did changes in "Web" tab as you said

but the resault of collectstatic has not changed , exactly as before :

You have requested to collect static files at the destination
location as specified in your settings:
/home/zg500/zg500.pythonanywhere.com/static
This will overwrite existing files!
Are you sure you want to do this?
Type 'yes' to continue, or 'no' to cancel: yes
Found another file with the destination path 'autocomplete_light/jquery.init.js'. It will be ignored since only the first encountered file is collec
ted. If this is not what you want, make sure every static file has a unique path.
Found another file with the destination path 'autocomplete_light/autocomplete.init.js'. It will be ignored since  only the first encountered file is 
collected. If this is not what you want, make sure every static file has a unique path.
Found another file with the destination path 'autocomplete_light/select2.css'. It will be ignored since only the   first encountered file is collected
 If this is not what you want, make sure every static file has a unique path.
Found another file with the destination path 'autocomplete_light/select2.js'. It will be ignored since only the first  encountered file is collected.
 If this is not what you want, make sure every static file has a unique path.
0 static files copied to '/home/zg500/zg500.pythonanywhere.com/static', 1451 unmodified.

and in the admin page which has ckeditor :

 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/admin/BallbearingSite/posts/2/
 [HTTP/1.1 200 OK 530ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/css/base.css
 [HTTP/1.1 304 Not Modified 420ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/css/forms.css
 [HTTP/1.1 304 Not Modified 420ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/css/rtl.css
 [HTTP/1.1 304 Not Modified 440ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/js/core.js
 [HTTP/1.1 304 Not Modified 440ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/js/admin/RelatedObjectLookups.js
 [HTTP/1.1 304 Not Modified 450ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/js/jquery.js
 [HTTP/1.1 304 Not Modified 440ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/js/jquery.init.js
 [HTTP/1.1 304 Not Modified 871ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/js/actions.js
 [HTTP/1.1 304 Not Modified 880ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/ckeditor/ckeditor-init.js
 [HTTP/1.1 304 Not Modified 899ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/ckeditor/ckeditor/ckeditor.js
 [HTTP/1.1 304 Not Modified 1028ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/admin/jsi18n/
 [HTTP/1.1 200 OK 1025ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/css/widgets.css
 [HTTP/1.1 304 Not Modified 520ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/img/nav-bg-reverse.gif
 [HTTP/1.1 304 Not Modified 400ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/img/tooltag-arrowright.png
 [HTTP/1.1 304 Not Modified 410ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/img/nav-bg.gif
 [HTTP/1.1 304 Not Modified 430ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/img/default-bg.gif
 [HTTP/1.1 304 Not Modified 420ms]
 [Show/hide message details.] GET
 http://zg500.pythonanywhere.com/static/admin/img/icon_deletelink.gif
 [HTTP/1.1 304 Not Modified 430ms]

OK -- so that looks like everything is working OK now from the browser's perspective. Is the ckeditor still not showing? If so, perhaps it would help if I could take a look at the admin pages in question. Would it be possible for me to log in to the site and take a look? You can send us a username and password privately using the "Send feedback" button at the top of the page.

Yes of course , its your favor .

Did you mention the errors of the admin page which i sent in the past post ? why it can not find these pathes ?

Which errors are you referring to? There are many in the previous posts.

Thanks, just followed zg500 steps and it worked perfectly!!

Excellent, thanks for confirming!

The ckeditor stopped working with the following error message in develop tools: ckeditor-init.js:1 Failed to load resource: the server responded with a status of 404 (Not Found). The issue is that the module worked for a while then stopped working.

If you're getting a 404 for a resource, it means that you're not serving the resource. Make sure that you have a static file mapping correctly set up to serve it at the URL that you're trying to load it from: https://help.pythonanywhere.com/pages/StaticFiles/ and https://help.pythonanywhere.com/pages/DebuggingStaticFiles/

That's right, I made a mistake to properly address the ckeditor static files. Thank you.