通过富文本编辑器操作HTML页面

<pre id="list_css" class="brush:css;toolbar:false">/*外部css，多个换行*/
https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css</pre>
<pre id="list_js" class="brush:js;toolbar:false">/*外部js，多个换行*/
https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js
https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js</pre>
<pre id="css" class="brush:css;toolbar:false">/*css*/
.test{
    background:red;
    color:white;
}</pre>
<pre id="html" class="brush:html;toolbar:false">&lt;!--dom--&gt;
&lt;div class=&quot;progress&quot;&gt;
    &lt;div class=&quot;progress-bar&quot; role=&quot;progressbar&quot; aria-valuenow=&quot;60&quot; 
        aria-valuemin=&quot;0&quot; aria-valuemax=&quot;100&quot; style=&quot;width: 40%;&quot;&gt;
        &lt;span class=&quot;sr-only&quot;&gt;40% 完成&lt;/span&gt;
    &lt;/div&gt;&lt;/div&gt;</pre>
<pre id="js" class="brush:js;toolbar:false">/*js*/
$(function(){
 var person = {
        name: &#39;wayne zhu&#39;,
        age: 22,
        school: &#39;xjtu&#39;
    }
    window.name = JSON.stringify(person)
});</pre>
<p style="text-align:center;">
    <br/>end
</p><script>/*init*/

String.prototype.replaceAll = function (sold, snew) {
    return this.replace(new RegExp(sold, "gm"), snew);
}

String.prototype.replaceChar = function(){
    return this
        .replaceAll("&.lt;".replace(".",""), "<")
        .replaceAll("&.gt;".replace(".",""), ">")
        .replaceAll("&.amp;".replace(".",""), \'&\')
        .replaceAll("&.quot;".replace(".",""), \'"\')
        .replaceAll("&.#39;".replace(".",""),"\'")
        .replaceAll("&.nbsp;".replace(".",""), " ");
}

var doc = {
    pres:document.getElementsByTagName("pre"),
    hidePresId:["list_css","list_js","css","html","js"],
    temp_style:"",
    temp_script:"",
    str_list_style:document.getElementById("list_css").innerHTML.split("\n").reverse(),
    str_list_script:document.getElementById("list_js").innerHTML.split("\n"),
    style:document.createElement("style"),
    dom:document.createElement("div"),
    script:document.createElement("script"),
    str_style:document.getElementById("css").innerHTML + "",
    str_dom:document.getElementById("html").innerHTML + "",
    str_script:document.getElementById("js").innerHTML + "",
    body:document.getElementsByTagName(\'body\')[0],
    html:document.getElementsByTagName(\'html\')[0],
    target:document.getElementsByTagName("pre")[0],
    head:document.getElementsByTagName("head")[0],
    url_reg:/^[a-zA-z]+:\/\/[^\s]*$/
}

for (var i = 0; i < doc.hidePresId.length; i++) {
    document.getElementById(doc.hidePresId[i]).style.display = "none";
}

for (var i = 0; i < doc.str_list_style.length; i++) {
    if(doc.url_reg.test(doc.str_list_style[i])){
        doc.temp_style=document.createElement("link");
        doc.temp_style.rel="stylesheet";
        doc.temp_style.type="text/css";
        doc.temp_style.href=doc.str_list_style[i];
        doc.head.insertBefore(doc.temp_style,document.head.firstChild);
    }
}

for (var i = 0; i < doc.str_list_script.length; i++) {
    if(doc.url_reg.test(doc.str_list_script[i])){
        doc.temp_script=document.createElement("script");
        doc.temp_script.type="text/javascript";
        doc.temp_script.src=doc.str_list_script[i];
        doc.head.appendChild(doc.temp_script);
    }
}

doc.str_style=doc.str_style.replaceChar();

doc.style.innerHTML = doc.str_style;

doc.body.parentNode.insertBefore(doc.style, doc.body);

doc.dom.style.width = "100%";

doc.str_dom = doc.str_dom.replaceChar();

doc.dom.innerHTML = doc.str_dom;

doc.target.parentNode.insertBefore(doc.dom,doc.target);

doc.str_script=doc.str_script.replaceChar();

doc.script.innerHTML = doc.str_script;

doc.html.appendChild(doc.script);

doc = null;</script>