使用Javascript创建自己的HTML Textfield

Question

我遇到了以下http://ckeditor.com/demo，并且想知道是否有人有一个基本的教程如何实现这个（或者我应该使用哪些关键搜索术语）？

这只是一个经过大量修改的TextField，还是他们设法从头开始创建一个全新的TextField？

我多次尝试使用Google搜索，我总是得到与CSS等内置TextField相关的页面。

Answer 1

如果您想了解富文本网页编辑器的工作原理，那么一个好的开始就是查看contenteditable属性和document.execCommand方法（最好的编辑使用的不仅仅是这些，但这些在基础上）。过度简化，编辑器包含contenteditable块以及在文本选择上调用document.execCommand的方法。

但是，作为一个真正开发过此类编辑的人，你可能最好使用现有的编辑器（在我看来，CKEditor是一个很棒的编辑器）。

编辑：请注意contenteditable是一个专有（Microsoft）属性，但大多数（所有？）浏览器现在已经实现了它，它将在HTML5中。

编辑2：我想尝试澄清一些误解。

• div或iframe本身不可编辑，需要contenteditable属性。使用iframe通常是一种解决方法，因为较旧的Gecko浏览器仅支持可以仅应用于整个文档的备用可编辑属性（designMode）。

• 虽然高级编辑器的某些操作可能会使用innerHtml，但这不是在网上制作编辑器的关键。

Answer 2

它不是文本框。这是一个DIV，其中有很多HTML用javascript注入它。

基本思想是JavaScript使用div的innerHtml属性并将HTML写入其中。

Answer 3

这是一个替换输入的javascript实现。它基本上隐藏了输入并使用它来存储和通过POST传递数据。

Answer 4

我看过的高级文本字段都是iframe或div。他们背后的代码很安静，不太容易接近。

谨慎行事！

Answer 5

您可能需要考虑WYSIWYM而不是WYSIWYG。