在做wiki文档的时候需要引入markdown编辑器,在此记录一下
content = models.TextField(verbose_name='内容')
{% for field in form %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
<span class="error-msg">{{ field.errors.0 }}</span>
</div>
{% endfor %}
name='content'
,我们给它再套一个div
, 并给其添加一个属性id="editor"
。修改后代码如下:{% for field in form %}
{% if field.name == 'content' %}
<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>
{% else %}
<div class="form-group">
<label for="{{ field.id_for_label }}">{{ field.label }}</label>
{{ field }}
<span class="error-msg">{{ field.errors.0 }}</span>
</div>
{% endif %}
{% endfor %}
id="editor"
下载比较慢的话,我这里将文件网盘链接放在了文末,需要可以自行下载。
要使用md编辑器,需要先从静态文件中引入其css和js
<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
在js脚本中对md编辑器进行初始化
$(function () {
initEditorMd();
});
function initEditorMd() {
// 第一个参数是页面中位置(如上,我这里是id="editor")
// 第二个参数是生成md编辑器后的配置
editormd('editor', {
placeholder: "请输入内容",
height: 500,
})
}
当我们引入文件并完成初始化后,打开网页发现md编辑器一直在转圈圈加载
然后我们看一下后台的记录,有好多依赖文件加载失败
Not Found: /manage/4/wiki/add/lib/codemirror/codemirror.min.css
[16/Jul/2020 18:00:55] "GET /manage/4/wiki/add/lib/codemirror/codemirror.min.css HTTP/1.1" 404 6691
Not Found: /manage/4/wiki/add/lib/codemirror/addon/search/matchesonscrollbar.css
[16/Jul/2020 18:00:55] "GET /manage/4/wiki/add/lib/codemirror/addon/search/matchesonscrollbar.css HTTP/1.1" 404 6742
Not Found: /manage/4/wiki/add/lib/codemirror/addon/dialog/dialog.css
[16/Jul/2020 18:00:55] "GET /manage/4/wiki/add/lib/codemirror/addon/dialog/dialog.css HTTP/1.1" 404 6706
Not Found: /manage/4/wiki/add/lib/codemirror/codemirror.min.js
根据报错信息,我们查看 editor-md/lib
, 发现lib下面仍有一些js文件,也就是markdown组件内部依赖的一些文件,因为我们没有指明lib文件位置,编辑器加载的时候没找到依赖组件,就会报如上错误
我们在path指明lib的路径就好了
editormd('editor', {
placeholder: "请输入内容",
height: 500,
path: "{% static 'plugin/editor-md/lib/' %}"
})
我们再次查看网页,可以看到,markdown编辑器能够加载出来了。
最后,还有一个小问题,我md全屏显示的时候,可能会遇到下面这种问题,这是由于css样式分层导致(z-index),我们只要改一下md编辑器的z-index
,让其全屏时大于所有的z-index
即可。(z-index
默认为1000)
.editormd-fullscreen {
z-index: 1001;
}
这样就可以实现md全屏编写了。
div
中<div id="previewMarkdown">
<textarea>{{ wiki_object.content }}</textarea>
</div>
<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/marked.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/prettify.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/sequence-diagram.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/flowchart.min.js' %}"></script>
<script src="{% static 'plugin/editor-md/lib/jquery.flowchart.min.js' %}"></script>
$(function () {
initPreviewMarkdown();
});
function initPreviewMarkdown() {
editormd.markdownToHTML("previewMarkdown", {
// 内容过滤,防止xss攻击等
htmlDecode: "style, script, iframe"
});
}
editor-md
链接:https://pan.baidu.com/s/1CL4EwtP9WHYSOlG8AGhn9g
提取码:oxd1
如果本文对你有帮助,点个赞支持一下吧
您可能感兴趣的文章:
如对本文有疑问, 点击进行留言回复!!
springcloud中feign调用处理mybatis-plus Ipage反序列化问题。
Flume 史上最全面的大数据学习第十篇(一) 别再说不知道flume是什么了
网友评论