使用textarea元素同步iFrame源代碼

我正在爲自己的內容管理系統（CMS）開發純JavaScript JavaScript編輯器。我需要做的是將IFRAME中的源代碼與TEXTAREA元素的內容同步，這樣我就可以切換源代碼視圖和來回富文本編輯。我有一些代碼在一起，它同步數據，但我只能更改富文本編輯器（IFRAME）中的內容，而不是源編輯器（TEXTAREA）。這樣做的目的是通過POST表單將數據提交給服務器，因爲我不知道我該怎麼做。我也不想使用jQuery。我不是「JavaScript專家」。反正這裏是我的代碼段：使用textarea元素同步iFrame源代碼

<iframe id="editor" frameborder="0"></iframe> 
<textarea id="html" onchange="document.getElementById('editor').contentWindow.document.body.innerHTML=this.value;"></textarea> 
<script> 
var e = document.getElementById("editor").contentWindow; 
e.document.designMode = "on"; 
e.document.open(); 
e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>"); 
e.document.close(); 

function def() { 
    document.getElementById("fontName").selectedIndex = 0; 
    document.getElementById("fontSize").selectedIndex = 1; 
    document.getElementById("foreColor").selectedIndex = 0; 
} 

function edit(x, y) { 
    e.document.execCommand(x, false, y); 
    e.focus(); 
} 

setInterval(function() { 
    document.getElementById("html").value = e.document.body.innerHTML; 
}, 200); 
</script>

來源

2012-10-10 Solo

想通了，希望這可以幫助別人;）

<iframe id="editor" frameborder="0">test</iframe> 
<textarea id="html" onfocus="editor.rte();" onblur="editor.source();"></textarea> 
<script> 
<!-- 
//<![CDATA[ 
var editor = function() { 
    var e = document.getElementById("editor").contentWindow; 
    e.document.designMode = "on"; 
    e.document.open(); 
    e.document.write("<head><style>body{font-family:arial,helvetica,sans-serif;}</style></head>"); 
    e.document.close(); 
    var a, b; 
    return { 
     run:function(c, s) { 
      e.document.execCommand(c, false, s); 
     }, 
     source:function() { 
      clearInterval(b); 
      a = setInterval(function(){document.getElementById("html").value = e.document.body.innerHTML;}, 200); 
     }, 
     rte:function() { 
      clearInterval(a); 
      b = setInterval(function(){e.document.body.innerHTML = document.getElementById("html").value;}, 200); 
     } 
    }; 
}(); 
editor.source(); 
//]]> 
--> 
</script>

來源

2012-10-11 01:08:19 Solo

@solo

的代碼是壞，嘗試輸入<輸入>在textarea內。因爲間隔，你不能輸入它。所以，我的提示是，只能運行代碼，然後用戶完成打字。如..

var timer = null; 
$('textarea').keydown(function(){ 
    clearTimeout(timer); 
    timer = setTimeout(doStuff, 300) 
}); 

function doStuff() { 
    e.document.body.innerHTML = document.getElementById("html").value; 
}

對不起我的英語不好

來源

2013-12-28 03:56:25

使用textarea元素同步iFrame源代碼

回答

相關問題