Django admin 中的样式化 HTML 字段

Question

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

我的领域：

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

Answer 1

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

以下是使用CodeMirror 实现的，但您可以使用任何其他库（Monaco 等）。

最终结果：

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

Django 有相当灵活的templating 来启用它。我们可以覆盖整个模板或特定块。详细文档可以喜欢here。

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

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

这适用于 JSONField 数据。您将不得不稍微调整一下格式 html 或任何其他语言。

检查页面并找到您要定位的文本区域的 id

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

多个 textarea 输入也可以通过获取具有类名的元素来定位，然后循环遍历结果集并应用相同的逻辑。

对于html格式，

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