如何在Django应用中集成Medium Editor？配置后无显示

核心原因：脚本执行时机错误 #

你的代码中，初始化Medium Editor的脚本在.editable元素加载前就已执行，此时DOM中还不存在目标元素，导致编辑器无法完成初始化。

修复方案 #

1. 调整脚本位置 #

将初始化脚本移至.editable元素之后，确保DOM元素已存在再执行初始化：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>

<div class="editable" contenteditable="true"></div>

<script>var editor = new MediumEditor('.editable');</script>

2. 备选：监听DOM加载完成事件 #

若必须将脚本放在页面头部，用DOMContentLoaded事件包裹初始化代码，确保DOM完全加载后再执行：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<script src="https://cdn.jsdelivr.net/npm/medium-editor@latest/dist/js/medium-editor.min.js"></script>
<script>
document.addEventListener('DOMContentLoaded', function() {
  var editor = new MediumEditor('.editable');
});
</script>

<div class="editable" contenteditable="true"></div>

3. Django模板额外注意事项 #

• 避免Django模板语法与JS变量冲突，比如不要让模板变量名和JS变量重名。
• 若手动引入本地静态文件，先将Medium Editor的CSS和JS放入Django的static目录，再用{% static %}标签引入：

{% load static %}
<link rel="stylesheet" href="{% static 'medium-editor/css/medium-editor.min.css' %}">
<script src="{% static 'medium-editor/js/medium-editor.min.js' %}"></script>

4. 排查报错信息 #

打开浏览器开发者工具（F12）的控制台，查看是否有资源加载失败、语法错误等提示，根据报错定位具体问题。

内容的提问来源于stack exchange，提问作者Chiko