Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I add a WSYWYG editor to Django admin?

What is the most simplest way to add a WSYISWG editors to admin panel on a django blog?

like image 967
Adnan Avatar asked Oct 30 '11 18:10

Adnan


People also ask

How do I install Tinymce editor in Django?

If you need to use a different way to install django-tinymce you can place the tinymce module on your Python path. You can put it into your Django project directory or run python setup.py install from a shell. Add tinymce to INSTALLED_APPS in settings.py for your project: INSTALLED_APPS = ( ... 'tinymce', ... )

Is Froala WYSIWYG editor free?

Yes, 100% free. Use this online tool to convert text to html or sanity check your html code. If you need an editor license for your personal or enterprise app, check out the Froala licenses and plans..


1 Answers

I tried to implement the solution given by Vitali Ponomar.

I choose NicEdit because it were just two javascript files (nicEdit.js and nicEditorIcons.gif) that I put in my /media/js/ folder and doesn't require to change my field types in the model (I saw in TinyMCE Documentation that requires to change the field to a HTMLField type and I didn't want to change anything in the database).

I put in the model:

class NewsAdmin(admin.ModelAdmin):
    list_display = ('title','lead','date')
    class Media:
        js = ('/media/js/nicEdit.js', '/media/js/textarea_content.js')

admin.site.register(News, NewsAdmin)

The file textarea_content.js that I put in /media/js/ folder also is used to initialize an specific textarea with some specific buttons is:

bkLib.onDomLoaded(function() {
nicEditors.editors.push(
    new nicEditor({iconsPath : '/media/js/nicEditorIcons.gif',
        buttonList : ['fontSize','fontFamily','bold','italic',
            'underline','strikeThrough','left','center','right','justify',
            'ol','ul','subscript','superscript','hr','link','unlink','forecolor']
    }).panelInstance(
        document.getElementById('id_content')
    )
);
});

However if you are planning to use it for all textareas you can use bkLib.onDomLoaded(nicEditors.allTextAreas); instead the above code.

Finally, be carefull with permissions (when I tried first time in production environment my javascript files were nor available because of permissions).

like image 86
mauronet Avatar answered Sep 17 '22 20:09

mauronet