zoukankan      html  css  js  c++  java
  • 模态框 显示出模态框后在加载(可用模块框中加入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>>
    
    
  • 相关阅读:
    使用脚本进入一个命令行控制台,并预设执行的命令列表
    cifs挂载远程文件出现 No such device or address错误
    longtable 跨越多个页面时,如何在跨页时自动断行并加上横线及去掉页眉
    matplotlib中文显示-微软雅黑
    latex编译过程-关于嵌入所有字体
    python做图笔记
    linux启动全过程
    连接并同步windows下的git仓库
    反向ssh
    Ubuntu更改启动内存
  • 原文地址:https://www.cnblogs.com/hanfe1/p/13999079.html
Copyright © 2011-2022 走看看