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