Google Material 设计的 Summernote

Question

我想在 Google Material 设计中使用 Summernote 所见即所得编辑器。它可以工作，但是如果你尝试打开一个弹出窗口，一切都会变灰，你无法点击任何地方：

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="miniHUB. Das Portal für Ministranten!">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <title>TestPage</title>

    <meta name="theme-color" content="#3372DF">

    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:regular,bold,italic,thin,light,bolditalic,black,medium&amp;lang=en">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.cyan-light_blue.min.css">
    <link rel="stylesheet" href="styles.css">
    <style>
        #view-source {
            position: fixed;
            display: block;
            right: 0;
            bottom: 0;
            margin-right: 40px;
            margin-bottom: 40px;
            z-index: 900;
        }
    </style>

    <!-- Summernote -->
        <!-- include libraries(jQuery, bootstrap) -->
        <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script> 
        <script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script> 

        <!-- include summernote css/js -->
        <link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.css" rel="stylesheet">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote.js"></script>

</head>
<body>
    <div class="demo-layout mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header">
        <header class="demo-header mdl-layout__header mdl-color--grey-100 mdl-color-text--grey-600">
            <div class="mdl-layout__header-row">
                <span class="mdl-layout-title">miniHUB</span>
                <div class="mdl-layout-spacer"></div>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
                    <!--<label class="mdl-button mdl-js-button mdl-button--icon" for="search">
                        <i class="material-icons">search</i>
                    </label>-->
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" id="search">
                        <label class="mdl-textfield__label" for="search">Suche...</label>
                    </div>
                </div>
                <button class="mdl-button mdl-js-button mdl-js-ripple-effect mdl-button--icon" id="hdrbtn">
                    <i class="material-icons">more_vert</i>
                </button>
                <ul class="mdl-menu mdl-js-menu mdl-js-ripple-effect mdl-menu--bottom-right" for="hdrbtn">
                    <li class="mdl-menu__item" onclick="loadPage('about.html')"><a>Über/Kontakt</a></li>
                    <li class="mdl-menu__item"><a href="" target="_blank">WhatEver</a></li>
                </ul>
            </div>
        </header>
        <div class="demo-drawer mdl-layout__drawer mdl-color--blue-grey-900 mdl-color-text--blue-grey-50">
        </div>
        <main class="mdl-layout__content mdl-color--grey-100">
            <table class="mdl-data-table mdl-js-data-table mdl-shadow--2dp" style="width: 100%;">
                <tbody>
                  <tr>
                      <td class="mdl-data-table__cell--non-numeric" style="width: 0px;">&#8505;</td>
                      <td class="mdl-data-table__cell--non-numeric" style="width: 0px;">Beschreibung:</td>
                      <td class="mdl-data-table__cell--non-numeric"><textarea style="overflow-y: auto; width: 100%; border: none;" name="beschreibung" id="beschreibung"></textarea></td>
                  </tr>
              </table>
        </main>
    </div>



    <script src="https://code.getmdl.io/1.3.0/material.min.js"></script>
    <script>
        function loadPage(page) {
            document.location = page;
        };


    </script>
    <script>
        $('#adminedit').click(function () {
            document.location = "admin.html";


        });
        function summernoteInit(){
                $('#beschreibung').summernote('code', "");
                $('#beschreibung').summernote({
                    height: 300,
                    popover: {
                        image: [],
                        link: [],
                        air: []
                    }
                })
        }
        $(document).ready(function(){
            summernoteInit();
        });

    </script>
</body>
</html>

如果我只使用纯 HTML，效果会很好。我已经尝试使用 z-index 和不同的 div，但我无法让它工作。

感谢您的帮助！

Answer 1

我找到了解决问题的方法：

    function deleteProblems (){
        $('.modal-backdrop').remove();
        window.setTimeout(deleteProblems, 200);
    }
    function summernoteInit(){
            $('#beschreibung').summernote('code', "");
            $('#beschreibung').summernote({
                height: 300,
                popover: {
                    image: [],
                    link: [],
                    air: []
                }
            })
    }
    $(document).ready(function(){
        summernoteInit();
        window.setTimeout(deleteProblems, 500)
    });

希望对您有所帮助！

菲利普

Google Material 设计的 Summernote

Summernote with Google Material Design

css

summernote

material-design