冰山一角

让一个区域可编辑是实现编辑器最基础的内容之一。

在应用场景中，编辑器的初始状态，要么是从一个空的编辑器（新建文档），要么是从一个已经有内容的编辑器（编辑文档），因此设计这样一个接口：

var editorInstance = editor.create(document.getElementById("editor_source"));
document.getElementById("editor_wrapper").innerHTML = editorInstance.render();

对应的HTML：

<div id="editor_source">
    <h2>在线编辑器</h2>
</div>
<div id="editor_wrapper">
</div>

调用者创建编辑器，然后将编辑器放在自己希望的位置上，这样的实现对调用者的限制最小，而create方法内部，可以通过实例化一个Editor类来实现多例。此时，页面的加载流程是：

• 调用render()方法返回编辑器的html代码
• 将html代码插入指定位置
• 让编辑器的iframe可编辑

render()方法很简单，返回一段拼接好的HTML字符串，供用户插入到任何需要的地方。唯一要做的是在返回之前调用checkIframeAvailable()方法.

checkIframeAvailable()使用setTimeout轮询iframe是否被用户加入到dom中，一旦被加入，通过makeEditable()方法令其中的iframe进入编辑状态。

makeEditable()中，需要对IE和非IE进行分别处理，在IE通过

document.body.contentEditable = true

进入编辑状态，其他w3c标准兼容的浏览器则是

document.designMode = "on"

进入编辑状态之后，还有一些其他的事情要做，为了在firefox和webkit浏览器下和IE通过execCommand()产生的代码尽量一样，需要设置styleWithCSS或者useCSS两个command的值为false。另外，在firefox 2下，在创建iframe后，无法立即读取editor.document.body，需要使用setTimeout在下一个时间片读取。

这样，通过寥寥几十行代码，一个最基础的编辑器框就完成了，请看最终示例。你可以从外面粘贴一些带有格式的文本进入编辑器看看效果。

本文是在线编辑器系列文章的第二篇，在这个系列文章中，我会逐步深入和大家分享编辑器开发过程中的奥妙和各种奇怪的问题。下一篇文章将介绍如何给编辑器添加按钮操作，如果你对我的文章感兴趣，欢迎从页面右边订阅我的博客及时收到更新。