django 中引入markdown编辑器丨【生长吧!Python】

举报
ruochen 发表于 2021/06/28 08:42:43 2021/06/28
【摘要】 django 中引入markdown编辑器

在做wiki文档的时候需要引入markdown编辑器,在此记录一下

django 中引入markdown编辑器

1. textarea 输入框 --> markdown编辑器


  • 首先,我这里是使用 Form生成的表单,markdown 编辑器实质上就是替换 Form生成的 TextArea
  • models 如下:
    content = models.TextField(verbose_name='内容')
    
  • 在前端页面中,使用 for循环生成,部分代码如下
    {% 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 %}
    
  • 既然我们是要进行替换,那么在循环中if判断一下就好,如果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 %}
    
  • 查看浏览器,我们也可以看到content带有id="editor"
    在这里插入图片描述
  • 至于 markdown编辑器,我这里使用的是 mdeditor
    • github地址为: editor.md
    • 我们将其下载到本地

    下载比较慢的话,我这里将文件网盘链接放在了文末,需要可以自行下载。

  • 下载好以后,将其放在项目的static文件夹下。导入后,在examples中我们可以看到一些离线示例
    在这里插入图片描述

2. editor-md 的使用


  • 要使用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全屏编写了。
    在这里插入图片描述

3. Markdown预览

  • 经过上述步骤,已经能够实现markdown在页面进行展示了,然后实现一下markdown预览。
  • 同样的,前端页面i将content放在 div
    <div id="previewMarkdown">
    	<textarea>{{ wiki_object.content }}</textarea>
    </div>
    
  • 然后引入css和js
    <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>
    
  • 最后,编写js初始化函数
    $(function () {
    	initPreviewMarkdown();
    });
    
    function initPreviewMarkdown() {
    	editormd.markdownToHTML("previewMarkdown", {
    		// 内容过滤,防止xss攻击等
    		htmlDecode: "style, script, iframe"
    	});
    }
    

editor-md
链接:https://pan.baidu.com/s/1CL4EwtP9WHYSOlG8AGhn9g
提取码:oxd1

【生长吧!Python】有奖征文火热进行中:https://bbs.huaweicloud.com/blogs/278897

【版权声明】本文为华为云社区用户原创内容,转载时必须标注文章的来源(华为云社区)、文章链接、文章作者等基本信息, 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

举报
请填写举报理由
0/200