Forums

How to add WYSIWYG to Django ADMIN

Hello , First of I appreciate pythonanywhere team for giving us such a great platform to learn python and django. I have developed a tutorial website matmock.pythonanywhere.com I have to type html code to formatting my contents in Django admin. Instead of that can I have a WYSIWYG editor in Django admin i have applied various tutorial to achive this, but never succeded. I tried TinyMCe, niceEdit, And DOJO . But all failed. I was not able to see WYSIWYG editor in Django Admin. Kindly help me to achive this .

Here's another one to try, from PyDanny (who's a great guy and an excellent Django dev): Django-WYSIWYG. Try it out, and if you have problems, could you give us a little more detail about what went wrong?

I Have read your pydanny's link. It says......

 pip install django-wysiwyg

Ok Done no issue.... Then danny says

INSTALLED_APPS = (
...
'django_wysiwyg',)

Ok Done no issue....
Then Danny says...

 1. place the ckeditor distributables under STATIC_URL/ckeditor
 2. install django-ckeditor and include it in the INSTALLED_APPS
 3. DJANGO_WYSIWYG_MEDIA_URL in settings.py to the appropriate location containing the ckeditor distribution.

THIS I DON'T UNDERSTAND ......PLEASE can anybody help me.....GOD BLESS

The section you're referring to is actually giving three different things you can do. I suggest you go for the second one, it looks easiest. From a bash console, run

pip2.7 install --user django-ckeditor

(Change the 2.7 appropriately if you're using a different version of Python.)

Next, edit your settings.py again, and add ckeditor to the INSTALLED_APPS.

Thanks @giles I Have installed django-ckeditor Now the problem is to complete below step, Which basically says to copy change_form.htm .....this i am unable to do.... Please see this attached image of bash console..... enter image description here

So, you need to find out where django-wysiwyg has installed itself to. As you've done a pip install for Python 2.7, I'd expect it to be in /home/matmock/.local/lib/python2.7/site-packages/django_wysiwyg. That's where you're going to need to copy the change_form.html file from.

I have copied the change_form.html manually at location

/ > home > matmock > netmag > templates > admin > change_form.html

Now danny says to change the id_description.....

Now open the new pydanny/templates/my-app-name/admin/change_form.html file. You will need to set the fields you want made into rich text editors by adding {% wysiwyg_editor "id_description" %} template tag calls, replacing "id_description" with whatever your form's HTML field is named. For example:
{% extends "admin/change_form.html" %} 
{% load wysiwyg %}
{% block extrahead %}
{{ block.super }}
{% wysiwyg_setup %}
{% endblock %}
{% block content %}
{{ block.super }}
{% wysiwyg_editor "id_description" %}
{% endblock %}

I changed to my field name "content" BUT Iam not able to see my previous admin page . When I am going to add new post I am getting

 SERVER ERROR (500)

Is there anything in the error log (linked from the "Web" tab)?

File "/usr/lib/python3.4/importlib/__init__.py", line 109, in import_module
2016-01-25 14:27:52,119 :    return _bootstrap._gcd_import(name[level:], package, level)
2016-01-25 14:27:52,119 :  File "<frozen importlib._bootstrap>", line 2254, in _gcd_import
2016-01-25 14:27:52,120 :  File "<frozen importlib._bootstrap>", line 2237, in _find_and_load
2016-01-25 14:27:52,120 :  File "<frozen importlib._bootstrap>", line 2224, in _find_and_load_unlocked
2016-01-25 14:27:52,120 :ImportError: No module named 'django-ckeditor'

Your pip installs were for Python 2.7, your traceback suggests you're using Python 3.4. Use pip3.4 to install the module for the correct version of Python.

Thanks glenn i reinstall using pip3.4 now the error i am getting is

 RuntimeError at /admin/blog/post/238/
maximum recursion depth exceeded while calling a Python object
Request Method: GET
Request URL:    http://matmock.pythonanywhere.com/admin/blog/post/238/
 Django Version:    1.6.6
 Exception Type:    RuntimeError
Exception Value:    
maximum recursion depth exceeded while calling a Python object
 Exception Location:    /usr/local/lib/python3.4/dist-packages/django/utils/functional.py in wrapper, line 199
Python Executable:  /usr/local/bin/uwsgi
Python Version: 3.4.3
 Python Path:   
['/var/www',
  '.',
 '',
 '/home/matmock/.local/lib/python3.4/site-packages',
 '/var/www',
 '/usr/lib/python3.4',
 '/usr/lib/python3.4/plat-x86_64-linux-gnu',
 '/usr/lib/python3.4/lib-dynload',
 '/usr/local/lib/python3.4/dist-packages',
 '/usr/lib/python3/dist-packages',
 '/home/matmock/netmag']
 Server time:   Tue, 26 Jan 2016 05:57:01 +0000 here

What i think is ..........Some thing went wrong in following steps .............

usage within Django admin

RIght now there are no errors ....Now I am ablse to see the add new post to add new post in admin..........BUT...BUT....without wysiwyg editor...........

double-check the path to your admin template, and the TEMPLATE_DIRS setting in settings.py?

This is my template_dirs

TEMPLATE_DIRS = (BASE_DIR,'netmag/templates',)

This is path in my admin.py

class PostAdmin(admin.ModelAdmin):
      ..............
      ..............
      change_form_template = 'blog/admin/change_form.html'
      ..............
      ..............

What's the path on disk to BASE_DIR and to the actual template?

BASE_DIR path is

 import os
 BASE_DIR = os.path.dirname(os.path.dirname(__file__))

ok, and what path is that, actually? /home/matmock/something? my theory is that the TEMPLATE_DIRS path isn't the actual place where your templates are on disk...

Harry my dear friend .... The path is

/home/matmock/netmag

well that explains it then:

BASE_DIR = /home/matmock/netmag
TEMPLATE_DIRS = BASE_DIR + netmag/templates = /home/matmock/netmag/netmag/templates

but from your previous post, your template is at

/ > home > matmock > netmag > templates > admin > change_form.html
ie /home/matmock/netmag/templates/admin/change_form.html

so your problem is that /home/matmock/netmag/templates is not the same as /home/matmock/netmag/netmag/templates

you should change TEMPLATE_DIRS to

TEMPLATE_DIRS = os.path.join(BASE_DIR,'templates')

I have made changes u suggested but God knows the best...I don't know why i am unable to see WYSIWYG editor in Django admin

NOW the ERROR is as shown below enter image description here

I think it's because you haven't followed the instructions in exactly the way pydanny intended.

Your problems is you have a template called admin/change_form.html which is extending a template also called admin/change_form.html, and so django gets stuck in a loop.

pydanny wants you to have your template called "appname/admin/change_form.html", where appname should be one of your apps (an app has a models.py and is listed in INSTALLED_APPS).

You have two ways out:

One is to move your change_form.html into the templates directory for one of your projects' apps:

mkdir -p /home/matmock/netmag/appname/templates/appname
mv  /home/matmock/netmag/templates/admin /home/matmock/netmag/appname/templates/appname

and change the entry in admin.py so it now says appname/admin/change_form.html. You have to subsitute "appname" for the actual name of one of your django apps.

Two is maybe to put the template into a subfolder, like this:

mkdir  /home/matmock/netmag/templates/my_admin
mv  /home/matmock/netmag/templates/admin /home/matmock/netmag/templates/my_admin

and then change admin.py to say "my_admin/admin/change_form.html". This second one is a bit simpler maybe, but it's also different from what pydanny wants you to do, so if you're trying to follow the rest of his instructions, it will get confusing, so I recommend the first way.

Probably all this comes from the confusion between the django concept of a "project" and an "app". A project is your whole website code, whereas an app is just a part of it, and a project can contain many apps. It's easy to get mixed up.

NO my friend harry I followed your instructions but got no WYSIWYG editor :( Probably you take control of my app and do it for me .....if you can :) ...........please

What, exactly are you getting now?

I want WYSIWYG editor at content field in Django admin. But exactly I am getting plain TextField as shown below. enter image description here

Is your browser loading the static resources necessary for the WYSIWYG editor? Have a look in the developer console while loading that admin page.

Hi there, I'm sorry I can't do it for you! I'd have two recommendations at this point:

  1. Start again from the beginning, with a minimal app. It's hard to tell whether the problems you are having are because of django-wysiwyg or because of incompatibilities with your existing code. So, instead, I'd recommend starting a brand new, clean django project. Build an ultra-simple app (maybe just one model with one text field) and then try to add django-wysiwig to that, following the instructions from pydanny carefully. if you get it working, then you can replace the simple app with your own app, gradually, taking small steps. I feel like that's more likely to work than trying to build on top of an existing codebase.

  2. Get yourself some better help. We're here to help with issues to do with PythonAnywhere, but as far as I can tell, the problems you're having are to do with django-wysiwig, and we don't know anything about that. you could check out codementor, where people offer 1-to-1 help.