如何制作HTML / JS所见即所得的编辑器？ [英] How to make an HTML/JS WYSIWYG editor?

问题描述

我尝试了许多不同的Google搜索，但我无法找到当前的教程（比2006年更新）了解如何实际创建WYSIWYG编辑器。我意识到已经有很多了，但我很好奇他们是如何工作的。我查看了一些源代码，但要消化很多东西。看起来格式化的文本不能放在textarea框中，但他们会幻想这样做 - 如何？

解决方案

Javascript所见即所得编辑器不使用textarea（至少不是外部的，很可能幕后有一个textarea这是填充构成WYSIWYG内容的代码，以便它可以张贴在表单中）。

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

<一旦一个文档（就富文本编辑器而言，这通常意味着嵌入一个设置了页面的designMode的iframe）或元素是可编辑的，通过使用 execCommand 方法（其中有许多不同的模式 - 粗体，斜体等），这些模式在所有浏览器中都不一定相同，请参见 rel =noreferrer> this table 获取更多信息）。 code> innerHTML 的可编辑元素，将被加载到发布的textarea中。 HTML的生成取决于浏览器。

资源：

• http://blog.whatwg.org/通往html-5-contenteditable


• http://www.mozilla.org/editor/ie2midas.html

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?

解决方案

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).

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 (contentEditable is now part of 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 execCommand method (for which there are a number of different modes -- bold, italics, etc. -- which are not necessarily the same across all browsers. See this table for more info).

In order to pass content from the editable element to the server, generally the innerHTML of the editable element, is loaded into a textarea, which is posted. The makeup of the HTML generated depends on the browser.

Resources:

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

这篇关于如何制作HTML / JS所见即所得的编辑器？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！