Installation

This section describes how to install the django-tinymce application in your Django project.

Prerequisites

The django-tinymce application requires a supported Django version. If you use the django-filebrowser application in your project, the tinymce application can use it as a browser when including media.

Note that the documentation will use ‘TinyMCE’ (capitalized) to refer the editor itself and ‘django-tinymce’ (lower case) to refer to the Django application.

Installation

  1. Install django-tinymce using pip (or any other way to install python package) from PyPI. If you need to use a different way to install django-tinymce you can place the tinymce module on your Python path.

    pip install django-tinymce
    
  2. Add tinymce to INSTALLED_APPS in settings.py for your project:

    INSTALLED_APPS = (
        ...
        'tinymce',
        ...
    )
    
  3. Add tinymce.urls to urls.py for your project:

    urlpatterns = patterns('',
        ...
        path('tinymce/', include('tinymce.urls')),
        ...
    )
    

Testing

Verify that everything is installed and configured properly:

  1. Setup an isolated environment with virtualenv and activate environment:

    virtualenv --no-site-packages env
    . env/bin/activate
    
  2. Install required packages:

    pip install Django django-tinymce
    
  3. Setup environment variable DJANGO_SETTINGS_MODULE:

    export DJANGO_SETTINGS_MODULE='tests.settings'
    
  4. Create project and change into project directory:

    django-admin startproject tinymce_test
    cd tinymce_test
    
  5. Setup test database (it will be created in current folder):

    python manage.py migrate
    
  6. Create superuser (follow the prompts):

    python manage.py createsuperuser
    
  7. Run Django runserver command to verify results:

    python manage.py runserver
    
  8. Open this address in a browser:

    http://localhost:8000/admin/testapp/testpage/add/
    

If you see TinyMCE instead of standard textarea boxes everything is working fine, otherwise check installation steps.

Configuration

The application can be configured by editing the project’s settings.py file.

TINYMCE_JS_URL (default: settings.STATIC_URL + 'tinymce/tinymce.min.js')

The URL of the TinyMCE javascript file:

TINYMCE_JS_URL = os.path.join(STATIC_URL, "path/to/tiny_mce/tiny_mce.js")
TINYMCE_DEFAULT_CONFIG

The default TinyMCE configuration to use. See the TinyMCE manual for all options. To set the configuration for a specific TinyMCE editor, see the mce_attrs parameter for the widget. !Important: The language attribute should only be set to force TinyMCE to have a different language than Django’s current active language.

If not set, the default value of this setting is:

{
    "theme": "silver",
    "height": 500,
    "menubar": False,
    "plugins": "advlist,autolink,lists,link,image,charmap,preview,anchor,"
    "searchreplace,visualblocks,code,fullscreen,insertdatetime,media,table,"
    "code,help,wordcount",
    "toolbar": "undo redo | formatselect | "
    "bold italic backcolor | alignleft aligncenter "
    "alignright alignjustify | bullist numlist outdent indent | "
    "removeformat | help",
}
TINYMCE_COMPRESSOR (default: False)

Whether to use the TinyMCE compressor, which gzips all Javascript files into a single stream. This makes the overall download size 75% smaller and also reduces the number of requests. The overall initialization time for TinyMCE will be reduced dramatically if you use this option.

TINYMCE_EXTRA_MEDIA (default: None)

Extra media to include on the page with the widget.

TINYMCE_FILEBROWSER (default: True if 'filebrowser' is in INSTALLED_APPS, else False)

Whether to use the django-filebrowser as a custom filebrowser for media inclusion. See the official TinyMCE documentation on custom filebrowsers.

Example:

TINYMCE_JS_URL = 'http://debug.example.org/tiny_mce/tiny_mce_src.js'
TINYMCE_DEFAULT_CONFIG = {
    "height": "320px",
    "width": "960px",
    "menubar": "file edit view insert format tools table help",
    "plugins": "advlist autolink lists link image charmap preview anchor searchreplace visualblocks code "
    "fullscreen insertdatetime media table code help wordcount",
    "toolbar": "undo redo | bold italic underline strikethrough | fontselect fontsizeselect formatselect | alignleft "
    "aligncenter alignright alignjustify | outdent indent |  numlist bullist checklist | forecolor "
    "backcolor casechange permanentpen formatpainter removeformat | pagebreak | charmap emoticons | "
    "fullscreen  preview save print | insertfile image media pageembed template link anchor codesample | "
    "a11ycheck ltr rtl | showcomments addcomment code",
    "custom_undo_redo_levels": 10,
    "language": "es",  # To force a specific language instead of the Django current language.
    "browser_spellcheck": True,
}
TINYMCE_COMPRESSOR = True
TINYMCE_EXTRA_MEDIA = {
    'css': {
        'all': [
            ...
        ],
    },
    'js': [
        ...
    ],
}