Question

当我把我希望成为wysihtml5编辑器的textarea时，我收到以下错误消息：

Uncaught TypeError: Cannot read property 'document' of null at wysihtml5-0.3.0.js:5460

这是html代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="ThemeBucket">
<link rel="shortcut icon" href="images/favicon.png">

<title>TTZ - Fragebogen erstellen</title>

<!--Core CSS -->
<link href="bs3/css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-reset.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" />

<link rel="stylesheet" href="css/jquery.steps.css?1">

<!-- Custom styles for this template -->
<link href="css/style.css" rel="stylesheet">
<link href="css/style-responsive.css" rel="stylesheet" />
<!-- Html5 Editor -->
<link href="js/bootstrap-wysihtml5/bootstrap-wysihtml5.css" rel="stylesheet">

<link href="css/questionForm.css" rel="stylesheet">
</head>

<body> 
<section class="panel">
<header class="panel-heading">
    Fragebogen Erstellen
</header>
<div class="panel-body">
    <div id="wizard">  
        <!-- Step 1 start -->
        <h2>Eigentschaften</h2>
        <section>
            <form class="form-horizontal" action="" enctype="multipart/form-data">
                <div class="row">
                    <div class="col-md-8">
                        <div class="form-group">
                            <label class="col-lg-2 control-label">Titel</label>
                            <div class="col-lg-10">
                                <input type="text" class="form-control" placeholder="Titel">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 control-label">Beschreibung</label>
                            <div class="col-lg-10">
                                <textarea class="htmlEdit form-control" cols="60" rows="8"></textarea>
                            </div>
                       </div>
                    </div>
                    <div class="col-md-4">
                        <label class="control-label">Bild zum Fragebogen:</label>
                        <div class="fileupload fileupload-new" data-provides="fileupload">
                            <div class="fileupload-new thumbnail" style="width: 200px; height: 150px;">
                                <img src="http://www.placehold.it/200x150/EFEFEF/AAAAAA&amp;text=no+image" alt="" />
                            </div>
                            <div class="fileupload-preview fileupload-exists thumbnail" style="max-width: 200px; max-height: 150px; line-height: 20px;"></div>
                            <div>
                                <span class="btn btn-white btn-file">
                                    <span class="fileupload-new"><i class="fa fa-paper-clip"></i> Select image</span>
                                    <span class="fileupload-exists"><i class="fa fa-undo"></i> Change</span>
                                    <input type="file" class="default" />
                                </span>
                                <a href="#" class="btn btn-danger fileupload-exists" data-dismiss="fileupload"><i class="fa fa-trash"></i> Remove</a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </section>
        <!-- Step 1 end -->

        <!-- Step 2 start -->
        <h2>Fragen hinzufügen</h2>
        <section>
            Some content here
        </section>
        <!-- Step 2 end -->

        <!-- Step 3 start -->
        <h2>Abschlusstext konfigurieren</h2>
        <section>
            Some content here
        </section>
        <!-- Step 3 endt -->

        <h2>Abschluss</h2>
        <section>
            Some content here
        </section>
    </div>
</div>
</section>
</div>
    </div>
    <!-- page end-->
    </section>
    </section>
    <!--main content end-->

  </section>
<!--Core js-->
<script src="js/jquery.js"></script>
<script src="bs3/js/bootstrap.min.js"></script>
<script class="include" type="text/javascript" src="js/jquery.dcjqaccordion.2.7.js">   </script>
<script src="js/jquery.scrollTo.min.js"></script>>
<script src="js/jQuery-slimScroll-1.3.0/jquery.slimscroll.js"></script>
<script src="js/jquery.nicescroll.js"></script>

<script src="js/jquery-steps/jquery.steps.js"></script>

<!-- HTML5 Editor -->
<script src="js/bootstrap-wysihtml5/wysihtml5-0.3.0.js"></script>
<script src="js/bootstrap-wysihtml5/bootstrap-wysihtml5.js"></script>


<!-- Our main JS file -->
<script src="js/mini-upload-form/assets/js/script.js"></script>

<script type="text/javascript" src="js/bootstrap-fileupload/bootstrap-fileupload.js">   </script>
<script type="text/javascript" src="js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>


<!--common script init for all pages-->
<script src="js/scripts.js"></script>

<script type="text/javascript">
$(function ()
{
    $("#wizard").steps({
        headerTag: "h2",
        bodyTag: "section",
        transitionEffect: "fade"
    });
    $('.htmlEdit').wysihtml5();
});
</script>

</body>
</html>

当我将我的textarea移出我的jquery步骤div时，它的效果非常好......但我需要在我的步骤中使用wysihtml5。有什么想法吗？

编辑：这里的代码似乎有问题：

// Create the basic dom tree including proper DOCTYPE and charset
  iframeDocument.open("text/html", "replace");
  iframeDocument.write(sandboxHtml);
  iframeDocument.close();

  this.getWindow = function() { return iframe.contentWindow; };
  this.getDocument = function() { console.log(iframe); return iframe.contentWindow.document; };

此时我已经在iframe上观看了它并且它为空。我只是不知道为什么，我只是无法理解整行10000行代码;）

bootstrap-wysihtml5在jquery步骤中不起作用

0 个答案: