我尝试了很多不同的Google搜索,但是我还没有找到关于如何实际创建WYSIWYG编辑器的当前教程(比2006年更新).我意识到已经有很多,但我很好奇它们是如何工作的.我查看了一些源代码,但要消化很多.似乎格式化文本不能放在textarea框中,但它们却给出了这样做的错觉 - 怎么样？
Dan*_*uis 68
JavaScript的WYSIWYG编辑器不使用一个textarea(至少不是外部,很可能是幕后有是填充,构成了所见即所得的内容,以便它可以在形式发布的代码一个文本).
相反,有两个属性用于在网页中创建可编辑区域:designMode适用于整个文档,或contentEditable适用于特定元素.这两个属性最初都是微软的创新,但已被所有主流浏览器采用(contentEditable现在是HTML5的一部分).
一旦文件(富文本编辑器,这通常是指与嵌入设置的designMode到你的页面中的iframe而言)或元件由编辑,格式是通过使用完成execCommand方法(其中有许多不同的模式-大胆,斜体等 - 在所有浏览器中都不一定相同.有关详细信息,请参阅此表.
为了将内容从可编辑元素传递到服务器,通常innerHTML将可编辑元素的内容加载到已发布的文本区域中.生成的HTML的组成取决于浏览器.
资源:
New*_*ser 12
我有一个好主意,拿这个代码制作一个很酷的WYSIWYG编辑器 -
为了制作一个漂亮的编辑器,我用JavaScript创建了一个代码,它将打开一个包含结果的新窗口 -
让我们从身体开始 -
<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 作为编辑器字段。它们捕获您的输入（文本 + 格式）并将相应的 HTML 写入 iframe。如果您提交包含原始 textarea 的表单，它们会将 iframe 的内容复制到 textarea 中，因此会提交 html 代码。
嗯，这很简单。