Django: Use TinyMCE 4 in admin interface

Question

After trying various ways to have TinyMCE as editor for my HTML content in Django administration I finally get it to work with this tutorial - https://github.com/ITCase-django/django-tinymce-4.

However using this method I have to have Django 1.9 and "Grappelli" admin skin which I would rather avoid. I tried to remove it but it also removed TinyMCE.

I also tried using HTMLField() from django-tinymce package, but this way got very crude editor with only handful of options (bold, italics, lists and that was that).

Is there any "best-practice" to have Django (newest version) administration with full-fledged TinyMCE 4?

EDIT: After trying various options (like advanced theme with HTMLField()) I am back where I started with Grappelli theme. I guess I can put up with this theme for some time.

Answer 1

Third party library is the quick solution but if you want JS only solution and do not need any other library to be installed.You can do it in django admin with your custom JS file.

class FooForm(forms.ModelForm):

   def __init__(self,*args,**kwargs):
      super(FooForm, self).__init__(*args, **kwargs)
      self.fields['yourtinymcefield'].widget.attrs['class'] = 'tiny-class'
   class Meta:
      model = FooModel
      fields = ('fields') # your fields here

Then in your admin.py

class FooAdmin(admin.ModelAdmin):
    form = FooForm
    # regular stuff
    class Media:
        js = (
            'https://cloud.tinymce.com/stable/tinymce.min.js' # tinymce js file
            'js/myscript.js',       # project static folder
        )

admin.site.register(Foo, FooAdmin)

Then initialize it in myscript.js

<script>

tinyMCE.init({
        //mode : "textareas",
        mode : "specific_textareas",
        editor_selector : "tiny-class",
        theme : "simple"
    });
</script>

Answer 2

If you look at the documentation, you can see there are a few ways to implement the editor: http://django-tinymce.readthedocs.io/en/latest/usage.html#using-the-widget.

Since you are going with the model field type, you are going to want to look at the settings to expand the options available on the editor.

The default setting for the editor is Simple. Based off your statement about that being rather crude, I would move to the full-featured editor.

To do so, you are going to be changing the configuration in your projects settings.py: http://django-tinymce.readthedocs.io/en/latest/installation.html#configuration

Without testing, if you add:

TINYMCE_DEFAULT_CONFIG = {
'theme': "advanced",
}

This will open up more buttons for you to use.