0

そのため、現在、Ace と jQuery で生成された iFrame を使用して、iFrame の Ace テキストエリアに記述されたコーディングをプレビューするプレビュー付きのエディターに取り組んでいます。正常に動作しますが、そこで書いたスクリプトが読み込まれません (具体的には jQuery/JS について話します)。

だからここに私のマークアップがあります:

<div class="box" id="snippet">
    <input type="text" name="name" class="appname" id="appname" placeholder="App name" />
    <div class="snippettext apptext" id="editor">Write code here!</div>
    <textarea id="editorhidden"></textarea>
    <div id="previewcode">

    </div>
</div>

そして、ここに私のjQuery/javascriptがあります:

$(document).ready(function(){

    var editor = ace.edit("editor");
    editor.setTheme("ace/theme/monokai");
    editor.getSession().setMode("ace/mode/javascript");
    var $frame = $('<iframe id="previewframe">');
    $('#previewcode').html($frame);
    setTimeout( function() {
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $body.html(editor.getValue());
        $frame.contents().find('body').prepend('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>').end();
    }, 1 );
    $(".updatepreview").click(function(){
        var doc = $frame[0].contentWindow.document;
        var $body = $('body',doc);
        $body.html(editor.getValue());
        $frame.contents().find('body').prepend('<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"><\/script>').end();
        $(".loadingimage").hide();
    });

});

jQueryでjQueryを処理することについて何かがあると思いますが、それを修正する方法が本当にわかりません。どんな助けでも大歓迎です-ありがとう:)。

編集:これは私が取り組んでいるものの画像です

4

1 に答える 1