Replace textarea with rich text editor in Django Admin?

I would like to know the best way to replace a standard textarea field with a rich text editor in Django Admin?


Asked by: Kellan270 | Posted: 05-10-2021






Answer 1

There's an add-on Django application to provide TinyMCE support for Django admin forms without having to muck around with admin templates or Django newform internals.

Answered by: John242 | Posted: 06-11-2021



Answer 2

Take a look on this snippet - basic idea is to include custom JS in your admin definitions which will replace standard text areas with rich-text editor.

For jQuery/FCKEditor such JS could look like that:

$(document).ready(function() {
    $("textarea").each(function(n, obj) {
        fck = new FCKeditor(obj.id) ;
            fck.BasePath = "/admin-media/fckeditor/" ;
            fck.ReplaceTextarea() ;
    });
});

Answered by: Victoria934 | Posted: 06-11-2021



Answer 3

I'd say: define your own ModelAdmin class and overwrite the widget used for particular field, like:

class ArticleAdminModelForm(forms.ModelForm):
    description = forms.CharField(widget=widgets.AdminWYMEditor)

    class Meta:
        model = models.Article

(AdminWYMEditor is a forms.Textarea subclass that adds WYMEditor with configuration specific to Django admin app).

See this blog post by Jannis Leidel to see how this widget can be implemented.

Answered by: Roland306 | Posted: 06-11-2021



Answer 4

At the date of the post and the answers TinyMCE was quite popular (as it probably remains today). But after some time ckeditor has appeared and many consider that a better alternative, including many SO users:

Compare TinyMCE and CKeditor for a Wiki

http://www.turnkeylinux.org/blog/tinymce-vs-ckeditor

There is also a 2013 review of WISIWYG editors with Django in Russian:

http://habrahabr.ru/company/htdt/blog/202782/

Answered by: Lily939 | Posted: 06-11-2021



Answer 5

Currently the most straight forward way to use tinymce in django admin is to use Grappelli.

http://code.google.com/p/django-grappelli/

Grappelli is also a requirement for django-filebrowser so if you want the whole shebang you will gotta need it anyways.

Answered by: Caroline621 | Posted: 06-11-2021



Answer 6

class KindEditor(forms.Textarea):
    class Media:
        css ={
            'all':(settings.STATIC_ROOT + 'editor/themes/default/default.css',)
        }
        js = (settings.STATIC_ROOT + 'editor/kindeditor-min.js',settings.STATIC_ROOT + 'editor/lang/zh_CN.js',)
    def __init__(self):
        attrs = {}
        attrs['rel'] = 'kind'
        super(KindEditor, self).__init__(attrs)


class NewsAdminForm(forms.ModelForm):
    pass

    class Meta:
        model = News
        widgets = {
            'body':KindEditor()
        }

class NewsAdmin(admin.ModelAdmin):
    form = NewsAdminForm


admin.site.register(News, NewsAdmin)

Answered by: Arnold936 | Posted: 06-11-2021



Answer 7

Ok, to update a little this post, I would say that the easiest way to implement TinyMCE is to use the django-tinymce app. You must also download the JS files from the TinyMCE page. I got some errors with the django intenationalization, but downloading the laguage packs from the TinyMCE must be enough.

Answered by: Julian990 | Posted: 06-11-2021



Answer 8

Install this package

pip install django-ckeditor

then run these commands to migrate.

python manage.py makemigrations
python manage.py migrate
python manage.py collectstatic

finally restart your Django server.

Once you complete the above steps, you can see the rich text editor in your admin panel fields.

Answered by: Jack412 | Posted: 06-11-2021



Similar questions

best python lib to make the textarea safe in the web page when user submit

i want to clean some tag like : <script> and other, so what python lib you are using to do this . thanks


about textarea \r\n or \n in python

i have tested code in firefox under ubuntu: the frontend is a textarea,in textarea press the key ENTER,then submit to the server, on the backend you'll get find \r\n string r=request.POST.get("t") r.find("\r\n")>-1: print "has \r\n" my question is when we will get \r\n ,when we'll get \n?is this platform independent? this is important when want to use this st...


python - textarea to list

textarea returns this [u'a\r\nb\r\nc\r\nd\r\ne'] what is the best way to turn that into a list ['a', 'b', 'c', 'd', 'e'] Thanks!


python - Django - Cannot display a form field as a textarea

I am declaring a field as a textarea. It works on my local server but not on my remote server. I am using Django version 1.2.3 on my local server and 1.2.5 on my remote server. Here is the code I am using to display a field as a textarea: message = forms.CharField(widget=forms.Textarea) Then, I display the form using: {{ form.message }} On my remote server...


python - How to get the content of textarea

I have this textarea form: self.response.out.write(""" <form name="title" action="/edittitlepitchhandler" method="post"> ... pitch: <br /> <textarea name="new_pitch" rows="13" cols="75"> "%s" </textarea><br /><br /> ... <input type="submit" value="submit"> </form>""" % (..., m.pitch, ...) )


python - Clear text from textarea with selenium

I've got some tests where I'm checking that the proper error message appears when text in certain fields are invalid. One check for validity is that a certain textarea element is not empty. If this textarea already has text in it, how can I tell selenium to clear the field? something like: driver.get_element_by_id('foo').clear_field()


How to get TEXTAREA value in a python server?

I'm coding a simple python server to hold logs throughout a company. The site presents change logs for upcoming projects for all teams. Each team has the option to edit their logs. The way I did this was by making a form with a TEXTAREA which they fill out and submit. However, I can't for the life of me figure out how to pull the value of the textarea into my server. Right now I have: def do_POST(self): ...


python - How to render my TextArea with WTForms?

To render my textareafield with a specified number of columns and rows with WTForms, how do I set the number of columns and rows? I followed the instructions from this question but it didn't work: How to specify rows and columns of a <textarea > tag using wtforms I tried adding a w...


python - Why the same file differs from textarea and file input?

I am trying to make a webform where you can give input as a file or to paste it into textarea. But when the same data arrives to bottle it is different. Data length from the textarea is larger when from file input. Why could this happen?


html textarea via python using post function

<div><textarea cols="25" rows="12" name="box" id="box" tabindex="2">TEXT GOES HERE </textarea> </div> <div> <p class="submit"><input type="submit" name="submit" id="submit" class="button-primary" value="Submi" tabindex="2" /></p> </div> </form> How can I fill the text area with my text from python code using p...






Still can't find your answer? Check out these communities...



PySlackers | Full Stack Python | NHS Python | Pythonist Cafe | Hacker Earth | Discord Python



top