如何制作一个HTML / JS所见即所得的编辑器？
我已经尝试了许多不同的Googlesearch，但是我一直无法find当前的教程（比2006年更新）如何实际创build所见即所得的编辑器。 我意识到已经有很多了，但我很好奇他们是如何工作的。 我已经看了一些源代码，但要消化很多东西。 我想知道是否有人可以描述他们的工作原理？ 也就是说，似乎格式化的文本不能放置在一个textarea框中，但他们却给出了这样做的幻想 – 怎么样？
Javascript所见即所得的编辑器不使用textarea（至less不是外部的，可能在幕后有一个textarea填充构成WYSIWYG内容的代码，以便它可以在表单中发布）。
相反，有两个属性用于在网页中创build可编辑区域：应用于整个文档的designMode或应用于特定元素的contentEditable 。 这两个属性最初是微软的创新，但已被所有主stream浏览器采用（ contentEditable现在是HTML5的一部分）。
一旦一个文档（就富文本编辑器而言，这通常意味着embedded一个设置了您的页面的designMode的iframe）或元素是可编辑的，格式化是通过使用execCommand方法完成的（为此有许多不同的模式 – 粗体，斜体等等 – 在所有的浏览器中不一定是相同的，更多的信息见下表 ）。
为了将内容从可编辑元素传递到服务器，通常将可编辑元素的innerHTML加载到发布的textarea中。 HTML生成的结构取决于浏览器。
资源 ：
我有一个好主意，拿这个代码做一个很酷的所见即所得的编辑器 –
为了编写一个好的编辑器，我用JavaScript编写了一个代码，它将打开一个包含结果 –
让我们从Body-
<body> <textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea> <br /> <button onclick="ShowResult()">see result!</button> </body>
现在我们继续使用JavaScript-
function ShowResult() { my_window = window.open("about:blank", "mywindow1"); //By the above line code we have opened a new window my_window.document.write(x); //Here we have added the value of the textarea to the new window }
我们来看整个代码：
<html> <script type="text/javascript"> function ShowResult() { my_window = window.open("about:blank", "mywindow1"); my_window.document.write(x); } </script> <body> <textarea style="height:400px;width:750px;overflow:auto;" onblur="x=this.value"> </textarea><br /> <button onclick="ShowResult()">see result!</button> </body> </html>
如果我能以任何方式帮助你，我很高兴做到这一点。
感谢您提出这个问题，并提高我对JavaScript的好奇心。
基本上他们隐藏你的textarea，并将iframe作为编辑器字段。 他们捕捉你的input（文本+格式化），并将相应的HTML写入iframe。 如果您提交包括原始文本区域的表单，则会将iframe的内容复制到textarea中，并因此提交html代码。
那么，这是相当简单的。
