Django框架----应用editor.md组件

应用markown组件

• 富文本编辑器----ckeditor
• markdown编辑器----mdeditor

项目中使用markdown编辑器：

下载地址：

https://github.com/pandao/editor.md

示例：https://pandao.github.io/editor.md/examples/index.html

1. 添加和编辑的页面中的textarea输入框 -> 转换为markdown编辑器

# 1. textarea通过div包裹以便以后查找并转换为编辑器
<div id="editor">
    ...
</div>

# 2.应用js和css
{% load 'static' %}
<link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.min.css' %}">
<script src="{% static 'plugin/editor-md/editormd.min.js' %}"></script>
<script src="{% static 'js/jquery.min.js' %}"></script>

# 3.进行初始化
<script>   
        $(function () {
            initEditorMd();
        });

        /*初始化markdown编辑器（textarea转换为编辑器）*/
        function initEditorMd() {
            editormd('editor', {
                placeholder:'请输入内容~',
                height:500,
                /*指定markdown依赖文件的路径 */
                path: "{% static 'plugin/editor-md/lib/' %}"    
                
            })
        }
</script>

# 4. 解决全屏显示问题
<style>
.editor-fullscreen {
            z-index: 1001;
        }
</style>    

2. HTML展示页面（按照markdown格式显示）

   # 1. textarea通过div包裹以便以后查找并转换为编辑器
   <div id="previewMarkdown">
       .<textarea>...</textarea>
   </div>
   
   # 2.引入css，js
   {% load 'static' %}
   
   <link rel="stylesheet" href="{% static 'plugin/editor-md/css/editormd.preview.min.css' %}">
   
   <script src="{% static 'js/jquery.min.js' %}"></script>
   <script src="{% static 'plugin/editor-md/editormd.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>
   <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/sequence-diagram.min.js' %}"></script>
   <script src="{% static 'plugin/editor-md/lib/underscore.min.js' %}"></script>
   <script src="{% static 'plugin/editor-md/lib/raphael.min.js' %}"></script>
   
   # 3.初始化预览页面
   /* 初始化展示页面 */
   <script>
           function initMarkdown() {
               editormd.markdownToHTML('previewMarkdown', {
                   htmlDecode: 'style, script, iframe'
               })
           }
   </script>    
   

编辑页面展示：

HTML页面展示