Question

I have a model with an HTMLField which can be edited with a TinyMCE control in the admin. However, I would like to be able to give different options to TinyMCE depending on which instance of the model is being edited. How can I do this?

(For example, if the user is editing the SimplePage instance whose slug is technologies, I want TinyMCE to use the default CSS file, but if its editing the SimplePage whose slug is ticker, I want to use a different CSS file.)

Answer 1

I guess you have a Media class in your ModelAdmin with additional JavaScript and CSS for the admin (like here). Your JavaScript doesn’t know the slug of the current object, let’s change that.

First create one of the following directory structures in your templates directory: “admin/your-app” for an app or “admin/your-app/your-model” for a specific model only (see the Django documentation).

Then create a file “change_form.html” in that directory and put something similar to this in there:

{% extends "admin/change_form.html" %}
{% block extrahead %}
<script type="text/javascript" charset="utf-8">
    var MYAPP_objectSlug = "{{ original.slug|escapejs }}";
</script>
{{ block.super }}
{% endblock %}

This will extend the usual “change_form.html” of the admin and extend the extrahead block to set a JavaScript variable with your object slug (original is your object).

Now adapt the JavaScript file that does the tinyMCE.init to use a different CSS file based
on the JavaScript variable MYAPP_objectSlug.

if (MYAPP_objectSlug == "ticker"){
    var MYAPP_cssFile = "../css/special.css"; // change to your path
} else {
    var MYAPP_cssFile = "../css/default.css"; // change to your path
}

tinyMCE.init({
    ...
    content_css : MYAPP_cssFile,
    ...
});