Javascript 将iframe设置为输入字段？

我正在尝试重新创建此插件-

我想知道他们是怎么做到的，但是代码乱七八糟，所以我自己写

这是我已经做过的-

如您所见，我只需使用一个数据编辑器=“init”就可以初始化插件，并在其中创建和附加一个iframe。。但是如何使其像输入一样可写

我正在绞尽脑汁想怎么做

欢迎任何帮助

谢谢

代码：

var编辑器=编辑器| |{}；
（功能（编辑器）{
变量编辑器=函数（编辑器）{
this.editor=editor；
this.editorWidth=editor.width（）；
this.editorHeight=editor.height（）；
this.init（）；
};
Editor.prototype.init=函数（）{
这个.basicStyles（）；
这个.createEditor（）；
};
Editor.prototype.basicStyles=函数（）{
这位编辑
.css（'border-width'，'1px'）
.css（'border-style'，'solid'）
.css（“边框颜色”、“灰色”）；
这位编辑
.css（'padding-top'，'10px'）
.css（'padding-right'，'10px'）
.css（'padding-bottom'，'10px'）
.css（'padding-right'，'10px'）；
};
Editor.prototype.createEditor=函数（）{
if（this.createIframe（））{
this.createNeccessaryTagsInSideHead（）；
this.createNeccessaryTagsInSideBody（）；
}
};
Editor.prototype.createIframe=函数（）{
this.iframe=$（“”{
“数据编辑器”：“iframe”，
“frameborder”：0，
“滚动”：“否”，
“宽度”：this.editorWidth，
“高度”：this.editorHeight，
“边框”：“1px纯红”，
“背景”：“红色”
}).appendTo（本.editor）；
this.headinsideinframe=$（this.iframe.find（'head'）；
this.bodyInsideIframe=$（this.iframe.find（'body'）；
if（this.iframe）{
返回true；
}否则{
返回false；
}
};
Editor.prototype.createNecessaryTagsInsideHead=函数（）{
this.headInsideFrame.append（“”）；
};
Editor.prototype.createNecessaryTagsInsideBody=函数（）{
};
window.onload=函数（）{
var el=$（“[数据编辑器]”）；
变量编辑器=新编辑器（el）；
};
}(编辑),；

要获取可编辑的DOM元素，请将元素的

contenteditable

属性设置为

true

因此，在代码中，更改

<div data-editor="init"></div>

到

---

然后用户可以编辑div的内容

我需要说。。我没想到会有这么简单和愚蠢的事情！它在IE8+中工作：呜呜。。英雄联盟真不敢相信。。这是我程序员生活中最美好的一天！！！！！！！非常感谢@Maximillian当我发现这一点的时候，它让我大吃一惊。令人惊讶的是，尽管HTML5有着明显的实用性，但它的某些内容却如此晦涩难懂。

<div data-editor="init"></div>

<div data-editor="init" contenteditable="true"></div>