爲博客園文章中插入的代碼片斷加一個運行按鈕

時間 2019-11-11

標籤博客文章插入代碼片斷一個運行按鈕简体版

原文原文鏈接

博客園裏你們都分享了不少的有用知識，看到好的代碼，總想拿到手上去試一下，而後慢慢體會！若是是展現一段完整能運行的代碼，若能給讀者提供一個【運行代碼】的按鈕，就方便多了！前兩天開通了博客園的JS權限（發郵件到contact@cnblogs.com能夠申請開通），今天先拿這個試了一下手，先來體驗一把吧：html

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

<body>
<h1>Hello, world!</h1>
</body>
</html>

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

【狀況分析】

博客園裏正常插入的代碼是由一個這樣的大體結構組成的，以下所示：編輯器

<div class="cnblogs_code">
    <pre>
        //這裏是你的代碼
        //不過這段代碼是通過cnblogs編輯器從新組織的一段html代碼
    </pre>
</div>

只要可以得到這個cnblogs_code下pre裏的內容，並將這一段內容輸出到一個新的窗口中，目標基本就實現了。這個實現的方法很簡單，直接用jQuery就可得到，代碼以下：this

var code = $('.cnblogs_code').text();
//注意這裏不要用html()，不然你獲得的將是一段cnblogs編輯器重組後的html代碼

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

1）在每一段代碼區後面自動添加一個按鈕，這樣就不用手動去添加代碼按鈕了。看到有些博客朋友是手動添加按鈕和增長一個textarea來放入代碼實現的，這並不科學。code

2）爲該按鈕綁定動做，點擊時運行對應的代碼片段。htm

3）有些代碼片段不想添加運行代碼按鈕怎麼辦？咱們只要手動爲每個代碼斷片增長一個can_run的className（進入到編輯的html模式下添加給代碼區域一個can_run便可），而後在JS中只獲取can_run裏的代碼，而不是cnblogs_code下的代碼。以下圖所示：blog

【JS代碼的實現】

由於博客園頁面自動引入了jQuery，那麼接下來的實現我所有用jQuery來操做，實現代碼以下：事件

$(function() {
    /* 得到整個頁面可被運行的代碼片段*/
    var code = $('.can_run');

    /*爲每一個can_run的代碼區域添加按鈕並綁定事件*/
    code.each(function() {
        var button = $('<button class="runcode">運行上面的代碼</button>'), //按鈕
            p = $('<p style="text-align:right;"></p>'), //按鈕加入到段落中
            $this = $(this); //保存當前代碼區域的引用

        /*組織結構，並在can_run以後添加這個結構*/
        p.append(button);
        $this.after(p);

        /*爲當前代碼片斷對應的按鈕綁定點擊事件*/
        button.on('click', function() {
            var win = window.open('', '_blank', ''); //開啓新窗口
            win.document.write( $this.text() ); //向新窗口輸出內容
        });
    });
});

【這個JS代碼放哪？】

一、直接將這段JS保存到本地，而後上傳到你的博客園後臺。【操做路徑：管理 >> 文件 >> 選擇文件並上傳】ip

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

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

【接下來作什麼？】

接下來，你只要像往常同樣將代碼插入到文章中便可，若是有須要提供運行的代碼片段，直接進入HTML模式，給該片段加一個can_run的className值便可。這個實現並非複雜的邏輯，但確實能給咱們帶來必定的方便性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。