模态框 显示出模态框后在加载(可用模块框中加入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>>

posted @ 2020-11-18 12:12  hanfe1  阅读(277)  评论(0编辑  收藏  举报