wiki---Markdown编辑器的使用

• 什么时候会用？如果存在你发布一个东西，别人来用，基本就会用到

官网：https://pandao.github.io/editor.md/

编辑器分类

• 富文本 ;建议ckeditor
• Markdown 编辑器：建议mdeditor

使用步骤

• 1.找到和编辑我们项目中的textarea输入框。
• 2.那么就会变身为Markdown编辑器
  怎么做：要下载插件，并且要应用人家的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:"请输入内容！",
            height:500,//默认高度
            path:"{% static 'plugin/editor-md/lib/' %}"
        })
    }

• 修复结果

  
  image.png

总结一下

• 找到和编辑我们项目中的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>

• 导入静态文件css,js
• 在js block 里面配置初始化函数即可！

注意写上依赖的路径！！！！！！！在lib目录下哦

加油少年！

附录全屏模式解决css方案

• 下面是没有解决之前的效果：

  
  image.png

解决方案如下：改变z_index即可也即是。

加一个css配置：

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

完美解决

image.png