JS组件 markdown编辑器

1.前端html展示

<div id="content">
    {{ field }}  这里必须是input type="text"  标签
</div>

2.JS

1.导入

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

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

2.初始化
function init_markdown() {
            editormd("content",
                    {
                        placeholder:"请输入内容",
                        height:500,
                        path:"{% static "plugin/editor.md-master/lib/" %}",
                        imageUpload:true,
                        imageFormats:["jpg","png","jpeg","gif"],
                        imageUploadURL:wiki_upload_url

                    }
            )

        }
这里可以自定义markdown工具栏

function initMarkdown() {
    EditorMarkdown = editormd("editor",
            {
                placeholder:"请输入内容",
                height:300,
                path:"{% static "plugin/editor.md-master/lib/" %}",
                imageUpload:true,
                imageFormats:["jpg","png","jpeg","gif"],
                imageUploadURL:wiki_upload_url,
                toolbarAutoFixed:false, //取消工具栏置顶
                toolbarIcons:function () {
                    return ["bold","hr","del","italic","quote","|","image","preview","watch","fullscreen","||","save"]


                },
                toolbarCustomIcons:{
                    save:"<input type='button' value='保 存' class='btn btn-success btn-sm' onclick='saveDesc();' />"
                },
                onload:function () {
                    this.previewing();
                }

            }
    )

}

3.自定义工具栏（保存）的应用

//向后台发送更改的信息
function postAjaxChange(dataDict) {
    $.ajax({
            url:issues_change_url,
            type:"POST",
            dataType:"JSON",
            header:{
                "Content-Type":"application/json;charset=utf-8"
            },
            data:JSON.stringify(dataDict),
            success:function (res) {
                console.log(res)
                if (res.status){
                    createReplyTags(res.data)
                }else{

                    $("#id_"+dataDict.name).parent().next().text(res.data)
                }
            }
        })
    }

//保存markdown内容
function saveDesc() {
    var dict = {"name":"desc","value":(EditorMarkdown.getValue().toString())};
    postAjaxChange(dict);
}

3.解决markdown组件与bootstrap模态框不兼容问题

　　不兼容原因：在模态框打开之前， markdown已经初始化完毕，此时再打开模态框时，模态框中的markdown 无法编辑

　　解决思路：打开模态框后再初始化markdown

        function bindInitMarkdown(){
            $("#addModal").on("show.bs.modal",function (event) {

                initMarkdown();


            })
        }