Stylized HTML fields in Django admin-CodePudding

I Have TextField to store HTML text. I want to colorize HTML tags. I use TinyMCE but didn't need an HTML editor like WordPress just simple to colorize like IDE, Search a lot but didn't find anything useful, So if you can help I appreciate it.

My field:

I want output like this but changeable:

CodePudding user response：

Using a code editor in Django admin Textarea

The following is implemented with

For all the libraries, we need to add some library specific javascript and stylesheet plus some custom code for integration.

Django has pretty flexible templating to enable this. We can override the entire template or specific blocks. Detailed documentation can be fond here.

To integration CodeMirror, we can override the admin/base.html 's extrahead block. We will include the required js/css, one extra css for theming and some js to find and apply CodeMirror.

Here, I have create a admin/base.html inside my project's configured template directory. This will apply to all the apps and models. There are ways to target an app or model individually - check the office docs.

This works for JSONField data. You will have to tweak a bit to format html or any other language.

Inspect the page and find id of the textarea you want to target

<!-- tested with Django 3.2.9 -->

{% extends "admin/base.html" %}

{% block extrahead %}

{{ block.super }}

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.js" crossorigin="anonymous"
    referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/codemirror.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/theme/oceanic-next.min.css"
    crossorigin="anonymous" referrerpolicy="no-referrer" />

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/javascript/javascript.min.js"
    crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script type="text/javascript">
    window.addEventListener('load', (event) => {
        const target = document.getElementById("id_data");
        target.value = JSON.stringify(JSON.parse(target.value), null, '  ');
        const config = {
            mode: 'javascript',
            theme: 'oceanic-next',
            lineNumbers: true,
            lineWrapping: true
        }

        const jsonCodeMirror = CodeMirror.fromTextArea(target, config);
        jsonCodeMirror.setSize("100%", 600);
    });
</script>

{% endblock %}

Multiple textarea inputs can be targeted as well with get element with classname and then looping over the result set and applying the same logic.

For html formatting,

you can use this https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/htmlmixed/htmlmixed.min.js instead of javascript. Delete the json stringify statement. Change mode to htmlmixed.