模态框 显示出模态框后在加载（可用模块框中加入editormd编辑器）

阅读目录

• 事件
• 实例：

回到顶部

事件

Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。

事件类型 描述

show.bs.modal	show 方法调用之后立即触发该事件。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
shown.bs.modal	此事件在模态框已经显示出来（并且同时在 CSS 过渡效果完成）之后被触发。如果是通过点击某个作为触发器的元素，则此元素可以通过事件的 relatedTarget 属性进行访问。
hide.bs.modal	hide 方法调用之后立即触发该事件。
hidden.bs.modal	此事件在模态框被隐藏（并且同时在 CSS 过渡效果完成）之后被触发。
loaded.bs.modal	从远端的数据源加载完数据之后触发该事件。

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})
 

回到顶部

实例：

html
#用一个div包裹
<div id="editor">
     ...
</div>

js
#在之前加入 css，js文件
<script type="text/javascript">
        var WIKI_UPLOAD_URL = "{% url 'web:wiki_upload' project_id=request.tracer.project.id %}";
 
        $(function () {
            buttonEvent();
        });
 
        function buttonEvent() {
            $('#addModal').on('shown.bs.modal', function (event) {
                initEditorMd();
            });
        }
 
        //初始化md editor
        function initEditorMd() {
            editormd("editor", {
                placeholder: "请输入内容",
                height: 300,
                dialogShowMask: false,
                path: "{% static 'web/plugins/editor-md/lib/' %}",  //指定一些lib文件
                imageUpload: true,
                imageFormats: ['jpg', 'png', 'gif', 'jpeg'],
                imageUploadURL: WIKI_UPLOAD_URL //上传到哪里
            })
        }
 
    </script>>