獲取更多資訊，可以康康我的部落格，所有文章會在部落格上先發布隨記 - 記錄指間流逝的美好 (xiaoyustudent.github.io)

前言

新的一年還沒過去，我又開始搞事情了，偶爾一次用到了線上編輯網頁程式碼的網站，頓時想到，能不能自己實現一個呢？（PS：反正也沒事幹），然後又想著，能不能用在部落格上呢，這樣有些程式碼可以直接展現出來，多好，說幹就幹，讓我們康康怎麼去實現一個線上編輯程式碼的功能吧。（PS：有瑕疵，還在學習！勿噴！orz）

大致介紹

大概的想法就是通過iframe標籤，讓我們自己輸入的內容能夠在iframe中顯示出來，知識點如下，如果有其他問題，歡迎在下方評論區進行補充！ 1. 獲取輸入的內容 2. 插入到iframe中 3. 怎麼在部落格中顯示

當然也有未解決的問題：目前輸入的js程式碼不能操作輸入的html程式碼，查了許多文件，我會繼續研究的，各位大佬如果有想法歡迎討論

頁面搭建

頁面搭建很簡單，就是三個textarea塊，加4個按鈕，就直接上程式碼了 ```html

```

可能很多同學會好奇為啥我這裡用的script標籤框起來，我們看下這個圖片和這個程式碼

javascript et scriptStr = $('html').first().context.getElementsByTagName("script")[2].innerHTML

很簡單，我們儲存後的程式碼，是沒有這一段js程式碼的，所以需要替換掉，而這裡一共有3個script塊，最後一個，也就是下標為2的script塊會被替換掉。同理，後面替換掉儲存按鈕，input輸入框（輸入框是輸入檔名稱的，預設名稱是text）。

同時這裡把我們輸入的資料，通過js程式碼的方式加入進儲存後的檔案裡，實現開啟檔案就能看到我們寫的程式碼。之後我們把儲存後的檔案放在剛才我們建立的online資料夾下

hexo裡面使用

使用就很簡單了，我們通過iframe裡面的src屬性即可 ```html

```

展示圖