HTML Javascript 富文本框 (IDE)答案

【问题标题】：HTML Javascript Rich Text Box (IDE)HTML Javascript 富文本框 (IDE)
【发布时间】：2010-01-09 17:22:36
【问题描述】：

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

【问题讨论】：

标签： javascript html ide token richedit

【解决方案1】：

Google 用于“内容可编辑” 尝试在 Firefox 端直接按 F7 编辑 HTML 页面 :) Gmail 在 contenteditable="true" 的页面内使用 Frame。

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

【讨论】：

“东西”是问题的目的。

【解决方案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>

【讨论】：