2012-05-08 62 views
0

我在我的一個項目中使用Codemirror。 下面的代碼:Codemirror和iFrame問題

<script> 
window.onload = function() { 
var te = document.getElementById("js"); 
var te_html = document.getElementById("html"); 
var te_css = document.getElementById("css"); 

window.editor = CodeMirror.fromTextArea(te, { 
mode: "javascript", 
    lineWrapping: true, 
    }); 

window.editor_css = CodeMirror.fromTextArea(te_css, { 
    mode: "css", 
    lineWrapping: true, 
    }); 

    window.editor_html = CodeMirror.fromTextArea(te_html, { 
    mode: "text/html", 
    lineWrapping: true, 
    }) 
}; 
</script> 

我還使用傑弗里路的「如何注入自定義HTML和CSS到iframe」腳本來構建類似Tinkerbin,或某事的jsfiddle。

這裏是我的那部分代碼:

<script type="text/javascript"> 
(function() { 
    $('.grid').height($(window).height());  

    var contents = $('iframe').contents(), 
    body = contents.find('body'), 
    styleTag = $('<style></style>').appendTo(contents.find('head')); 

    $('textarea').keyup(function() { 
     var $this = $(this); 
     if ($this.attr('id') === 'html') 
     { 
     body.html($this.val()); 
     } 
     else 
     { 
     styleTag.html($this.val()); 
     } 

    }); 

})(); 
</script> 

這一切都很好,只是激活了CodeMirror劇本,沒有在結果選項卡中顯示出來。如果我刪除CodeMirror代碼部分,它工作正常。

這裏是我的項目鏈接:

http://mediodesign.ca/cms-test/

任何人知道哪裏是衝突?

謝謝!

回答

0

確保已加載所有的JavaScript的

mode/javascript.js 
mode/css.js 
mode/xml.js 

,如果你使用的是XHTML文件中這個腳本。用單引號(')代替雙引號("

ex。

<script> 
window.onload = function() { 
var te = document.getElementById('js'); 
var te_html = document.getElementById('html'); 
var te_css = document.getElementById('css'); 

window.editor = CodeMirror.fromTextArea(te, { 
mode: 'javascript', 
    lineWrapping: true, 
    }); 

window.editor_css = CodeMirror.fromTextArea(te_css, { 
    mode: 'css', 
    lineWrapping: true, 
    }); 

    window.editor_html = CodeMirror.fromTextArea(te_html, { 
    mode: 'text/html', 
    lineWrapping: true, 
    }) 
}; 
</script> 

傑弗里路的如何自定義HTML和CSS注入的iframe ...是無關緊要的裝載codemirror腳本