博客園里大家都分享了很多的有用知識，看到好的代碼，總想拿到手上去試一下，然后慢慢體會！如果是展示一段完整能運行的代碼，若能給讀者提供一個【運行代碼】的按鈕，就方便多了！前兩天開通了博客園的JS權(quán)限（發(fā)郵件到contact@cnblogs.com可以申請開通），今天先拿這個試了一下手，先來體驗一把吧：

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

<!DOCTYPE html><html><head>
    <meta charset="utf-8">
    <title>為行博客園中的代碼添加一個運行代碼按鈕</title></head><body><h1>Hello, world!</h1></body></html>

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

運行上面的代碼

點右上方的按鈕試試看吧！沒錯，在一個新窗口中正確的顯示了Hello, world!下面來說一下實現(xiàn)的步驟：

【情況分析】

博客園里正常插入的代碼是由一個這樣的大致結(jié)構(gòu)組成的，如下所示：

<div class="cnblogs_code">
    <pre>
        //這里是你的代碼
        //不過這段代碼是經(jīng)過cnblogs編輯器重新組織的一段html代碼    </pre></div>

只要能夠獲得這個cnblogs_code下pre里的內(nèi)容，并將這一段內(nèi)容輸出到一個新的窗口中，目標(biāo)基本就實現(xiàn)了。這個實現(xiàn)的方法很簡單，直接用jQuery就可獲得，代碼如下：

var code = $('.cnblogs_code').text();//注意這里不要用html()，否則你得到的將是一段cnblogs編輯器重組后的html代碼

如此，基本的思路便出來了：

1）在每一段代碼區(qū)后面自動添加一個按鈕，這樣就不用手動去添加代碼按鈕了?？吹接行┎┛团笥咽鞘謩犹砑影粹o和增加一個textarea來放入代碼實現(xiàn)的，這并不科學(xué)。

2）為該按鈕綁定動作，點擊時運行對應(yīng)的代碼片斷。

3）有些代碼片斷不想添加運行代碼按鈕怎么辦？我們只要手動為每一個代碼斷片增加一個can_run的className（進(jìn)入到編輯的html模式下添加給代碼區(qū)域一個can_run即可），然后在JS中只獲取can_run里的代碼，而不是cnblogs_code下的代碼。如下圖所示：

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 【JS代碼的實現(xiàn)】

因為博客園頁面自動引入了jQuery，那么接下來的實現(xiàn)我全部用jQuery來操作，實現(xiàn)代碼如下：

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

$(function() {    /* 獲得整個頁面可被運行的代碼片斷*/
    var code = $('.can_run');    /*為每個can_run的代碼區(qū)域添加按鈕并綁定事件*/
    code.each(function() {        var button = $('<button class="runcode">運行上面的代碼</button>'), //按鈕
            p = $('<p style="text-align:right;"></p>'), //按鈕加入到段落中
            $this = $(this); //保存當(dāng)前代碼區(qū)域的引用

        /*組織結(jié)構(gòu)，并在can_run之后添加這個結(jié)構(gòu)*/
        p.append(button);
        $this.after(p);        /*為當(dāng)前代碼片段對應(yīng)的按鈕綁定點擊事件*/
        button.on('click', function() {            var win = window.open('', '_blank', ''); //開啟新窗口
            win.document.write( $this.text() ); //向新窗口輸出內(nèi)容        });
    });
});

萬碼學(xué)堂,電腦培訓(xùn),計算機(jī)培訓(xùn),Java培訓(xùn),JavaEE開發(fā)培訓(xùn),青島軟件培訓(xùn),軟件工程師培訓(xùn)

 

【這個JS代碼放哪？】

1、直接將這段JS保存到本地，然后上傳到你的博客園后臺。【操作路徑：管理 >> 文件 >> 選擇文件并上傳】

2、在博客設(shè)置里加入對這個JS文件的引用【操作路徑：管理 >> 設(shè)置 >> 頁首HTML代碼】

<script src="你上傳的js文件位置"></script>

 

【接下來做什么？】

接下來，你只要像往常一樣將代碼插入到文章中即可，如果有需要提供運行的代碼片斷，直接進(jìn)入HTML模式，給該片斷加一個can_run的className值即可。這個實現(xiàn)并不是復(fù)雜的邏輯，但確實能給我們帶來一定的方便性。

轉(zhuǎn)載請注明來自北磬書生的博客

http://www.cnblogs.com/langzs/p/6719618.html