textarea顯示源代碼

textarea顯示源代碼

近期作的項目中，有須要顯示源碼的效果

最開始使用了不少冗餘的辦法，使用<pre></pre>和<code></code>標籤

把<用<代替，>用>代替

<pre>
  &lt;script&gt;
  alert('xx');
  &lt;/script&gt;
</pre>

 

只須要把頁面源文件，添加到textarea標籤裏面去便可，就會徹底顯示源碼，而不去顯示頁面效果了

可是textarea不能嵌套textarea,那樣會解析終止

這種辦法也很冗餘

因此咱們要尋找一種，textarea正確解析textarea的辦法

<div id="text-effect">
   <textarea id="textArea"></textarea>
</div>

=====================================================

function submitTryit() {}
   $(function() {
       $.get("table.html").success(function(res) {
        textArea.innerHTML = res;
    });
});

======================================================

這樣便可正確解析帶有自身textarea的標籤了

那麼，到這裏了，若是咱們想一同顯示源碼和效果呢。左邊修改源碼，右邊顯示效果，所見即所得的效果

w3c是經過插件寫的這樣效果，咱們徹底能夠經過jq來實現，在hbuilder服務器環境下，運行良好，親測

=============================================

<div class="content">

      <div id="subBtn">提交</div>

       <div id="text-effect" contenteditable="true">

            <textarea id="textArea"></textarea>
        </div>
         <div id="text-code"></div>
</div>

----------------------------------------------------------------

var _html = "";
function submitTryit() {
var text = textArea.value;
var ifr = document.createElement("iframe");
ifr.width = "100%";
ifr.height = "100%";
$("#text-code").html("").append(ifr);
var ifrw = (ifr.contentWindow) ? ifr.contentWindow : (ifr.contentDocument.document) ? ifr.contentDocument.document : ifr.contentDocument;
ifrw.document.open();
ifrw.document.write(text);
ifrw.document.close();
}
$(function() {
$.get("table.html").success(function(res) {
textArea.innerHTML = res;
});
$("#subBtn").click(function() {
submitTryit()
});
});

 

===========================================================

效果圖以下

 

 ==================================================================================

左邊編輯，顯示源代碼，右邊便可顯示效果了。

參考效果，下載地址

textarea解析自身正確：http://files.cnblogs.com/files/leshao/textarea%E8%A7%A3%E6%9E%90%E8%87%AA%E8%BA%AB%E6%AD%A3%E7%A1%AE.rar

源碼效果左右顯示：http://files.cnblogs.com/files/leshao/%E6%BA%90%E7%A0%81%E6%95%88%E6%9E%9C%E5%B7%A6%E5%8F%B3%E6%98%BE%E7%A4%BA.rar

 

小試牛刀，匯聚各家功夫所長！