我給我的部落格加了個線上執行程式碼功能

語言: CN / TW / HK

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

前言

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

大致介紹

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

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

頁面搭建

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

線上編輯器

```

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

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

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

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

text.png

hexo裡面使用

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

```

展示圖

show.png