Javascript 如何制作 HTML/JS WYSIWYG 编辑器？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2678264/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to make an HTML/JS WYSIWYG editor?
提问by LDK
I've tried many different Google searches but I haven't been able to find a current tutorial (newer than 2006) on how to actually create a WYSIWYG editor. I realize there are many already, but I'm curious as to how they actually work. I've looked over some of the source code, but it's a lot to digest. It seems formatted text can't be placed in a textarea box, and yet they give the illusion of doing just that - how?
我已经尝试了许多不同的 Google 搜索，但我一直无法找到有关如何实际创建 WYSIWYG 编辑器的当前教程（比 2006 年更新）。我意识到已经有很多了，但我很好奇它们实际上是如何工作的。我已经查看了一些源代码，但要消化的内容很多。似乎格式化文本不能放在 textarea 框中，但它们给人一种这样做的错觉 - 怎么办？
回答by Daniel Vandersluis
Javascript WYSIWYG editors do not use a textarea (at least not externally, it is likely that behind the scenes there is a textarea that is populated with the code that makes up the WYSIWYG content so that it can be posted in a form).
Javascript WYSIWYG 编辑器不使用 textarea（至少不是在外部，很可能在幕后有一个 textarea 填充了构成 WYSIWYG 内容的代码，以便它可以在表单中发布）。
Rather, there are two properties that are used to make an editable area in a webpage: designMode, which applies to a whole document, or contentEditable, which applies to a specific element. Both properties were originally Microsoft innovations, but have been adopted by all major browsers (contentEditableis now part of HTML5).
相反，有两个属性可用于在网页中创建可编辑区域：designMode，适用于整个文档，或contentEditable，适用于特定元素。这两个属性最初都是 Microsoft 的创新，但已被所有主要浏览器采用（contentEditable现在是 HTML5 的一部分）。
Once a document (in terms of rich text editors this generally means embedding an iframe with designMode set into your page) or element is made editable, formatting is done by using the execCommandmethod (for which there are a number of different modes -- bold, italics, etc. -- which are not necessarily the same across all browsers. See this tablefor more info).
一旦文档（就富文本编辑器而言，这通常意味着将带有 designMode 设置的 iframe 嵌入到您的页面中）或元素被设置为可编辑，则通过使用该execCommand方法（对于该方法有许多不同的模式——粗体、斜体等 - 不一定在所有浏览器中都相同。有关详细信息，请参阅此表）。
In order to pass content from the editable element to the server, generally the innerHTMLof the editable element, is loaded into a textarea, which is posted. The makeup of the HTML generated depends on the browser.
为了将内容从可编辑元素传递到服务器，通常innerHTML将可编辑元素的 加载到文本区域中，然后发布。生成的 HTML 的构成取决于浏览器。
Resources:
资源：
回答by NewUser
I have a good idea take this code to make a cool WYSIWYG editor-
我有一个好主意，用这段代码制作一个很酷的 WYSIWYG 编辑器 -
To make a nice editor I have made a code with JavaScript that will open a new window containing the result-
为了制作一个漂亮的编辑器，我用 JavaScript 编写了一个代码，它将打开一个包含结果的新窗口 -
Let's start with the Body-
让我们从身体开始——
<body>
<textarea style="height:400px;width:750px;overflow:auto;"onblur="x=this.value"></textarea>
<br />
<button onclick="ShowResult()">see result!</button>
</body>
Now we continue with the JavaScript-
现在我们继续 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
}
Let's see the code on-whole:-
让我们看看整个代码：-
<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>
如果我能以任何方式帮助你，我很高兴这样做。
Thank you for asking this question and for increasing my curiosity towards JavaScript.
感谢您提出这个问题并增加我对 JavaScript 的好奇心。
回答by Reto Aebersold
Basically they hide your textarea and place an iframe as an editor field. They capture your input (text + formating) and write the corresponding HTML into the iframe. If you submit your form including the original textarea they copy the content of the iframe into the textarea and therefore the html code gets submitted.
Well, this is quite simplified.
基本上他们隐藏你的 textarea 并放置一个 iframe 作为编辑器字段。它们捕获您的输入（文本 + 格式）并将相应的 HTML 写入 iframe。如果您提交包含原始 textarea 的表单，它们会将 iframe 的内容复制到 textarea 中，因此会提交 html 代码。
嗯，这很简单。
