django-makdown编辑器之编辑和显示

 

本章介绍一个markdown的用法，小白也是第一次接触希望对他人有所帮助，这是markdown的官方文档http://editor.md.ipandao.com/里面也有实例，先下载markdown插件

 

 

 点击下载把下载完的插件放到项目中去引用，引用markdown的css和js就可以实现：

项目中的插件：给大家看下就跟引用其他插件一样

 

 

• 富文本编辑器：ckeditor

• markdown编辑器,mdeditor

一、项目中想要应用markdown编辑器：都是在HTML页面操作

1.引用Markdow的css文件

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

2.内容区域：textarea标签外面要套一层div标签让textarea标签变身为markdown编辑器

<div id="editor">
<textarea>{{field}}</textarea>
</div>

3.引用Markdow的js文件

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

4.js代码

        function initEditorMd() {
            editormd('editor',{
                placeholder: "请输入内容",
                height: 500,
                path: "{% static '/web/plugin/editor.md/lib/' %}", //path是告诉markdown组件的位置,需要的依赖
                flowChart : true //支持流程图
            })
        }

5.效果显示：

 

 

 

 

二、项目中预览页面按照markdown格式显示：都是在HTML页面操作

1.内容区域：

<div id="previewMarkdown">
    <textarea>{{ wiki_object.content }}</textarea>
</div>

2.引用CSS：

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

3.引用JS：

    <script src="{% static '/web/plugin/editor.md/editormd.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/marked.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/prettify.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/raphael.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/underscore.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/flowchart.min.js' %}"></script>
    <script src="{% static '/web/plugin/editor.md/lib/jquery.flowchart.min.js' %}"></script>

4.JS代码：

        function initPreviewMarkdown(){
            editormd.markdownToHTML('previewMarkdown',{
                htmlDecode: "style,script,iframe", //过滤内容防止篡改
            });

        }

5.效果显示：