Django 管理中的程式化 HTML 字段

Question

我有 TextField 来存储 HTML 文本。我想给 HTML 标签上色。我使用 TinyMCE 但不需要像 WordPress 这样的 HTML 编辑器，只是像 IDE 一样简单地着色，搜索了很多但没有找到任何有用的东西，所以如果你能帮助我，我很感激它。

我的领域：

我想要这样的输出但是可变的：

Answer 1

在 Django admin Textarea 中使用代码编辑器

下面是用CodeMirror but you can use any other library (Monaco等实现的）

最终结果：

对于所有库，我们需要添加一些特定于库的 javascript 和样式表以及一些用于集成的自定义代码。

Django 非常灵活 templating to enable this. We can override the entire template or specific blocks. Detailed documentation can be fond here。

为了集成 CodeMirror，我们可以覆盖 admin/base.html 的 extrahead 块。我们将包含所需的 js/css、一个用于主题化的额外 css 和一些用于查找和应用 CodeMirror 的 js。

在这里，我在项目配置的模板目录中创建了一个 admin/base.html。这将适用于所有应用程序和模型。有多种方法可以单独定位应用程序或模型 - 查看 office 文档。

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 %}

多个文本区域输入也可以通过获取带有类名的元素然后遍历结果集并应用相同的逻辑来定位。

对于html格式,

您可以使用此 https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.0/mode/htmlmixed/htmlmixed.min.js 而不是 javascript。删除 json stringify 语句。将模式更改为 htmlmixed.

Django 管理中的程式化 HTML 字段

Stylized HTML fields in Django admin

django

django-admin