在django中集成markdown文本框

ericf~2024-02-11 19:11

首先需要下载开源组件：http://editor.md.ipandao.com/，可能需要挂梯子。

百度网盘：

链接：https://pan.baidu.com/s/1D9o3P8EQDqSqfhAw10kYkw

提取码：eric

1.在html代码中生成一个div，id=editor

html 复制代码

<div class="form-group">
    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
        <div id="editor">
            {{ field }}
        </div>
    <span class="error_msg">{{ field.errors.0 }}</span>
</div>

这里用的是 modelform，其中该字段 field 组件是 textarea 格式。

2.引入 css 和 js

html 复制代码

<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">

javascript 复制代码

<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>

3.写个函数

javascript 复制代码

function initEditorMd() {
    editormd('editor', {
        placeholder: '请输入内容',
        height: 500,
        path: '{% static 'plugin/editor-md/lib/' %}', 这一行是给出lib目录，不然会显示不出来
    })
}

这个 editor 就是第一步定义的 id。

4.修复全屏展示效果

这个直接在当前页面的css目录里面写上就好。

css 复制代码

.editormd-fullscreen {
    z-index: 1001;
}

.editormd-fullscreen {

z-index: 1001;

}

复制代码