Extending django-wysiwyg

The django-wysiwyg module can easily by extended with new editor types.

The editor switching in implemented by selecting templates based on the DJANGO_WYSIWYG_FLAVOR setting. Adding an extra editor simply requires these templates to be added:

• django_wysiwyg/editorname/includes.html
• django_wysiwyg/editorname/editor_instance.html

includes.html

The includes file will be added to the top of the page, to provide all required scripts. It is loaded by the {% wysiwyg_setup %} code. The template could contain something like:

<script type="text/javascript" src="{{ DJANGO_WYSIWYG_MEDIA_URL }}ckeditor.js"></script>
<script type="text/javascript" src="{{ DJANGO_WYSIWYG_MEDIA_URL }}sample.css"></script>

Secondly, the file has to provide a few JavaScript functions, to implement the JavaScript API This is used for Ajax environments, or interfaces which use a lot of DOM manipulation. The required API functions have the following structure:

var django_wysiwyg =
{
    editors: {},  // where the editor object can be stored.

    is_loaded: function()
    {
        // ... some test to see if the scripts were loaded properly.
        return window.MYEDITOR != null;
    },

    enable: function(editor_name, field_name)
    {
        this.editors[editor_name] = // ... enable the editor for the field name
    },

    disable: function(editor_name)
    {
        // ... disable the editor
    }
}

The enable() function should be able to deal with attempts to enable the editor twice. It should also store the created WYSIWYG editor instance in the this.editors[editor_name] variable. That allows the caller to access the object when it needs to.

For more inspiration, you can inspect the files in the django_wysiwyg template directory.

editor_instance.html

The editor-instance template is used to instantiate a single editor statically. It is loaded by the {% wysiwyg_editor fieldname %} line in the template. The contents of the template can look something like:

<script type="text/javascript">
    django_wysiwyg.enable('{{ editor_name }}', '{{ field_id }}');
</script>

In most cases, this should be enough to instantiate the editor for a specific field.

Extending existing templates

Some templates also provide blocks, that allow them to be extended. For example, the yui_advanced editor, is implemented by extending the yui templates.