获取更多信息，可以康康我的博客，所有文章会在博客上先发布随记 - 记录指间流逝的美好 (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文件夹下

使用就很简单了，我们通过iframe里面的src属性即可 ```html

```