我给我的博客加了个在线运行代码功能
获取更多信息,可以康康我的博客,所有文章会在博客上先发布随记 - 记录指间流逝的美好 (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
```