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();


            })
        }