• 什么時候會用？如果存在你發(fā)布一個東西，別人來用，基本就會用到

官網(wǎng)：https://pandao.github.io/editor.md/

編輯器分類

• 富文本 ;建議ckeditor
• Markdown 編輯器：建議mdeditor

使用步驟

• 1.找到和編輯我們項目中的textarea輸入框。
• 2.那么就會變身為Markdown編輯器
  怎么做：要下載插件，并且要應(yīng)用人家的css，js

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

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

• 報錯

  
  
  image.png

• 頁面一直在加載

  
  
  image.png

我們指定一個路徑即可

function initEditorMd() {
        //按照人家的要求來配置
        editormd("editor", {
            placeholder:"請輸入內(nèi)容！",
            height:500,//默認(rèn)高度
            path:"{% static 'plugin/editor-md/lib/' %}"
        })
    }

• 修復(fù)結(jié)果

  
  
  image.png

總結(jié)一下

• 找到和編輯我們項目中的textarea輸入框。并使用一個div包裹

                <div class="col-sm-9 content">
                       <form method="post">
                        {% csrf_token %}
                        {% for filed in form %}
                            {% if filed.name == 'content' %}
                         <div class="form-group">
{#                                使用markdown編輯器#}
                        <label for="{{ filed.id_for_label }}">{{filed.label}}</label>
                                <div id="editor">

                                {{ filed }}

                                </div>
                            <span class="error-msg"> {{ filed.errors.0 }}</span>

                            {% else %}
                            <div class="form-group">
                        <label for="{{ filed.id_for_label }}">{{filed.label}}</label>
                            {{ filed }}
                            <span class="error-msg"> {{ filed.errors.0 }}</span>
                            {% endif %}
                         {% endfor %}
                      <button type="submit" class="btn btn-primary" style="margin-top: 15px">提 交</button>
                    </form>
                </div>
            </div>
        </div>

• 導(dǎo)入靜態(tài)文件css,js
• 在js block 里面配置初始化函數(shù)即可！

注意寫上依賴的路徑?。。。。。?！在lib目錄下哦

加油少年！

附錄全屏模式解決css方案

• 下面是沒有解決之前的效果：

  
  
  image.png

解決方案如下：改變z_index即可也即是。

加一個css配置：

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

完美解決

image.png