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.

Dongola

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>

Zoes

Thanks, this works and indeed adds TinyMCE 4 to my admin interface :-) However customizing TinyMCE and getting it play along with images is another matter. I now appreciate Grappelli more for providing me with working editor. Alas bounty is yours. – Dongola

Yeah by this way you can initialize any JS related things in your admin panel. :) – Zoes

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.

Nickynico

Thanks, dunno how I missed this. This indeed works and adds more buttons, but the resulting TinyMCE is still far cry from current TinyMCE 4. – Dongola

My guess is that if you added more plugins that will help to give you the current TinyMCE4 feel. You just need to add to the config field the plugins you want to build out a more robust editor. – Nickynico

Honestly after trying some more stuff, I think it will be easier and less frustrating to build whole new page to add/edit HTML content and integrate TinyMCE via .js files directly. – Dongola

Answer 3

I recently had to change a few things in an admin page, and found that useful, maybe you'll be able to load TinyMCE and init it for the form you want with this. (I'd put that in a comment, but I can't comment with my rep)

Embody

Thanks, I would like to avoid modifying admin pages but if no better option comes along I'll try this. – Dongola