首页 > 代码库 > textarea显示源代码

textarea显示源代码

textarea显示源代码

近期做的项目中,有需要显示源码的效果

最开始使用了很多冗余的办法,使用<pre></pre>和<code></code>标签

把<用&lt;代替,>用&gt;代替

<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

 

小试牛刀,汇聚各家功夫所长!

 

textarea显示源代码