如何制作HTML/JS WYSIWYG编辑器？

Question

我尝试了许多不同的谷歌搜索，但我还没有能够找到一个当前的教程(比2006年更新)，关于如何真正创建一个所见即所得编辑器。我知道已经有很多了，但我很好奇它们是如何工作的。我已经看过了一些源代码，但有很多需要消化。格式化的文本似乎不能放在文本区框中，但它们却给人一种这样做的错觉--怎么做呢？

Answer 1

Javascript WYSIWYG编辑器不使用文本区域(至少在外部，很可能在幕后有一个文本区域，其中填充了构成所见即所得内容的代码，以便可以在表单中发布)。

相反，有两个属性用于在网页中创建可编辑区域:应用于整个文档的designMode或应用于特定元素的contentEditable。这两个属性最初都是微软的创新，但已经被所有主流浏览器采用(contentEditable现在是HTML5的一部分)。

一旦使文档(对于富文本编辑器而言，这通常意味着将设置了designMode的iframe嵌入到页面中)或元素可编辑，就可以使用execCommand方法进行格式化(有许多不同的模式--粗体、斜体等--不一定在所有浏览器上都是相同的。有关详细信息，请参阅this table )。

为了将内容从可编辑元素传递到服务器，通常将可编辑元素的innerHTML加载到文本区域中，该文本区域被发布。生成的HTML的构成取决于浏览器。

资源

• http://blog.whatwg.org/the-road-to-html-5-contenteditable
• http://www.mozilla.org/editor/ie2midas.html

Answer 2

基本上，他们隐藏你的文本区，并放置一个iframe作为编辑器字段。它们捕获您的输入(文本+格式化)，并将相应的HTML写入iframe。如果您提交包含原始文本区域的表单，它们会将iframe的内容复制到文本区域中，从而提交html代码。

好吧，这很简单。