Question

我希望在javascript中构建一个与gmail非常相似的IDE，除非样式会根据键入的内容自动更改。这个逻辑不是我挣扎的地方。它是如何使用gmail实现在html中以丰富的编辑格式进行编辑的能力。据我所知，textarea控件不能这样工作，那么他们如何伪造这个功能呢？

Answer 1

谷歌的“内容可编辑” 尝试在Firefox结束编辑HTML页面直接按F7 :) Gmail在页面内使用Frame，其中contenteditable =“true”。

另请参阅Google Web Toolkit： http://code.google.com/docreader/#p=google-web-toolkit-doc-1-5&s=google-web-toolkit-doc-1-5&t=DevGuideWidgetGallery 有RichTextArea小部件。

Answer 2

我不太确定这是不是您的意思，但您是否在寻找在线WYSIWYG编辑器？

在这种情况下，请允许我推荐CKEDitor，它非常快，现代且强大。

您可以在相应的Wikipedia entry中找到更广泛的列表。

您可能必须自定义任何编辑器才能编辑电子邮件（例如，您将无法使用任何预定义的CSS类，因此编辑器必须执行所有样式直接在标签中的定义）但它应该不是问题。

Answer 3

下载允许这样做的众多开源系统之一，并了解他们是如何做到这一点的基本上，它们将事件处理程序附加到按钮，该按钮又知道如何在光标当前位于文本区域中的位置插入“填充”，或者在文本区域中的选定区域周围插入“填充”。

Answer 4

我的投票是针对基于网络的编辑器列表中的“editarea”：Another Wikipedia entry。

我能够将其添加到具有最简单代码的现有页面中：

<script language="javascript" type="text/javascript" src="edit_area/edit_area_full.js"></script>
<script language="javascript" type="text/javascript" >
editAreaLoader.init({
  id: "my_textarea_id"   // ID of textarea to turn into syntax editor.
  , syntax: "php"
  , start_highlight: true
  , allow_resize: "both"
  , toolbar: "search, go_to_line, |, undo, redo, |, highlight, reset_highlight, word_wrap,|,syntax_selection"
  , min_height:150
  , min_width:400
});
</script>

HTML Javascript富文本框（IDE）

4 个答案: