HOWTO use TinyMCE version 4 with Django FileBrowser Media Manager

This HOW-TO should enable you to include the latest version of TinyMCE 4 with the Django FileBrowser media manager in the admin interface.

Although tested with the following versions it should also apply with others with little or no modification.

  • TinyMCE 4.1.2
  • Django 1.6.5
  • FileBrowser 3.5
  • Grappelli 2.5
  • Mezzanine 3.1 (optional)

In order to follow this HOWTO you should have a working Django application with FileBrowser and Grappelli.

Upgrading from 3 to TinyMCE 4 is straightforward and mainly involves changing a single setting, using FileBrowser to add images is also straightforward though it does involve patching a few files.

If your setup is not working as expected, check for missing edits or patches.

TinyMCE source files

Either download the TinyMCE files from http://www.tinymce.com/ or link to them using the CDN kindly provided by Cachefly.

If you are downloading them as in this HOWTO then put them in your staticfiles javascript folder.

TinyMCE initialisation file

Example tinyMCE.init script http://p-o.co.uk/files/TinyMCEv4Admin.js

On rendering the page in your browser it needs to be initialised to tie TinyMCE to each Textinput, using the example TinyMCEv4Admin.js edit it as appropriate for your site and save it in your staticfiles javascript folder as tinymce_setup.js.

The selector is textarea so all text area inputs will be associated with TinyMCE.  The function file_browser_callback opens FileBrowser when you click edit/insert links/images and videos.  You might want to change any or all of the settings as per the tinymce wiki including height/width, toolbars and plugins.

Be sure to check that the cmsURL points to your filemanager url for example /admin/filebrowser/browse/?pop=4

This is the example file_browser_callback that causes TinyMCE to open the filebrowser window

    file_browser_callback: function(input_id, input_value, type, win){
        var cmsURL = '/admin/filebrowser/browse/?pop=4';
        cmsURL = cmsURL + '&type=' + type;

        tinymce.activeEditor.windowManager.open({
            file: cmsURL,
            width: 800,  // Your dimensions may differ - toy around with them!
            height: 500,
            resizable: 'yes',
            scrollbars: 'yes',
            inline: 'yes',  // This parameter only has an effect if you use the inlinepopups plugin!
            close_previous: 'no'
        }, {
            window: win,
            input: input_id,
        });
        return false;
    },

Application settings

Mezzanine and TinyMCE 4 work well together, be sure to set TINYMCE_SETUP_JS and RICHTEXT_WIDGET_CLASS as appropriate in your applications settings.py.

  • RICHTEXT_WIDGET_CLASS = 'myapp.forms.TinyMceWidget'
  • TINYMCE_SETUP_JS = MEDIA_URL + 'js/tinymce_setup.js'

Form widget class

Although you could include the tinymce.min.js runtime and tinymce_setup.js in your template, rendering an attractive and functional form with TinyMCE v4 is easier with Django's Form Assets, the Media class.

This HOWTO uses the following example widget class with the runtime and setup files in the Media class and the textinput css class set to mceEditor.

class TinyMceWidget(forms.Textarea):
    """
    Setup the JS files and targetting CSS class for a textarea to
    use TinyMCE.
    """

    class Media:
        _tinymce_js = (
            staticfiles_storage.url("js/tinymce/tinymce.min.js"),
            staticfiles_storage.url("js/tinymce_setup.js"),
        )
        js = _tinymce_js

    def __init__(self, *args, **kwargs):
        super(TinyMceWidget, self).__init__(*args, **kwargs)
        self.attrs["class"] = "mceEditor"

Patch FileBrowser

The four templates files to be patched are:

  • templates/filebrowser/include/filelisting.html
  • templates/filebrowser/include/tableheader.html
  • templates/filebrowser/index.html
  • templates/filebrowser/version.html

Use the following patch to make Filebrowser TinyMCE v4 aware http://p-o.co.uk/files/filebrowser-to-tinymcev4.txt

You may have noticed in the setup file pop=4, this is used by filebrowser to identify TinyMCE v4 and include the appropriate javascript files.

You also need to add FB_TinyMCEv4.js to filebrowser/static/filebrowser/js, this is the code that runs when you ask FileBrowser to insert your image into the link, image or video.

var FileBrowserDialogue = {
    fileSubmit : function (FileURL) {
        parentWin = (!window.frameElement && window.dialogArguments) || opener || parent || top;
        tinymce = tinyMCE = parentWin.tinymce;
        self.editor = tinymce.EditorManager.activeEditor;
        self.params = self.editor.windowManager.getParams();
        parentWin.document.getElementById(self.params.input).value = FileURL;
        self.editor.windowManager.close(parentWin);
    },
}

fileSubmit() in FileBrowserDialogue may appear convoluted as recent javascript security only allows the creator of a window to close it, so the fileSubmit function updates source with the image url with 'parentWin.document.getElementById(self.params.input).value = FileURL;' then calls the creating script to close the window 'self.editor.windowManager.close(parentWin);'.

Testing

Having completed the above steps, you should have TinyMCE version 4 as part of your site, you should be able to edit text using the updated TinyMCE widget as well as insert and edit links/images/videos with Filebrowser as your media manager in Django admin.

You should be able to successfully run all your existing tests including python manage.py test filebrowser.