I implemented a syntax highlighted field in Django Admin using Ace.js and would appreciate feedback on my approach.

I needed to display a syntax highlighted field in the admin, so I took these steps:

1. Overwrote the change_view method in ModelAdmin
2. Customized the change_form admin template to wrap the data field in a <div id="editor"> and include Ace.js scripts
3. Extended admin_base.html to add ace.js via the {% block extrahead %}
4. Added JavaScript in the change_form template that attaches an event listener on each submit button to:
   • Read the content from #editor using getValue()
   • Create a fake input element named "data" with the captured value
   • Insert this element before another real input element

Below are the relevant code snippets:

Model:

PYTHONCopied
class Answer(models.Model):
    name = models.CharField("name", max_length = 32)
    data = models.TextField("python code", max_length = 65535)

Admin:

PYTHONCopied
class AnswerAdmin(admin.ModelAdmin):
    form = AnswerAdminForm

    def change_view(self, request, object_id, form_url = "", extra_context = None):
        extra_context = extra_context or {}
        if request.method == "GET":
            obj = Answer.objects.get(pk = object_id)
            extra_context["code"] = Answer.objects.get(pk = object_id).data
        return super().change_view(request, object_id, form_url, extra_context = extra_context,) 

Custom change_form template:

DJANGOCopied
{% extends "admin/change_form.html" %}
{% load i18n admin_urls %}
{% block field_sets %}
    {% for fieldset in adminform %}
        <fieldset class="module aligned {{ fieldset.classes }}">
            {% if fieldset.name %}<h2>{{ fieldset.name }}</h2>{% endif %}
            {% if fieldset.description %}
                <div class="description">{{ fieldset.description|safe }}</div>
            {% endif %}
            {% for line in fieldset %}
                <div class="form-row{% if line.fields|length == 1 and line.errors %} errors{% endif %}{% if not line.has_visible_field %} hidden{% endif %}{% for field in line %}{% if field.field.name %} field-{{ field.field.name }}{% endif %}{% endfor %}">
                    {% if line.fields|length == 1 %}{{ line.errors }}{% else %}<div class="flex-container form-multiline">{% endif %}
                    {% for field in line %}
                        {% if "Data:" in field.label_tag %}{# here #}
                            {{ field.label_tag }}<div id="editor">{{ field.field }}</div>
                        {% else %}
                            ...
                        {% endif %}
                    {% endfor %}
                    {% if not line.fields|length == 1 %}</div>{% endif %}
                </div>
            {% endfor %}
        </fieldset>
    {% endfor %}
{% endblock %}

{% block after_field_sets %}
    <style type="text/css" media="screen">
        #editor {
                 position: relative;
                 min-width: 660px;
                 max-width: 1680px;
                 width: auto;
                 height: 380px;
                 }
    </style>

    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/dracula");
        editor.session.setMode("ace/mode/python");

        document.addEventListener("DOMContentLoaded", function(){
            let editor_value = editor.getValue().trimLeft().trimRight();
            editor.setValue(editor_value);
            editor.clearSelection();
            let inputs = document.querySelectorAll("input[type=submit]");

            let send_data = function() {
                let finput = document.createElement("textarea"); 
                finput.type = "text"; 
                finput.name = "data";
                finput.id = "id_data";
                finput.value = editor.getValue();

                let name = document.getElementById("id_name"); 
                name.insertAdjacentElement("beforebegin", finput); 
            }

            inputs.forEach(e => { e.addEventListener("click", () => { send_data() }) })
        });
    </script>
{% endblock %}

Admin Form:

PYTHONCopied
class AnswerAdminForm(forms.ModelForm):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        self.fields["data"].initial = """class Test:\n    def __init__(self):\n       print(\"hello\")"""

    class Meta:
        model = Answer
        fields = ["name", "data"]

While the implementation works, I'm not entirely comfortable with the JavaScript solution and wonder if there's a cleaner alternative or improvements I could make. Please share any feedback or suggestions.

Thanks in advance, and I hope this code might also help someone else in the future!