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>>
    
    
  • 相关阅读:
    super与this的区别?
    springboot(4)-thymeleaf
    springboot(3)-自定义josn
    springboot(2)-Http协议接口开发
    springboot(1)-HelloWorld
    SpringSecurityOauth2.0
    Docker 应用部署
    RabbitMQ02
    RabbitMQ01
    011通用寄存器
  • 原文地址:https://www.cnblogs.com/hanfe1/p/13999079.html
Copyright © 2011-2022 走看看