我希望在 javascript 中构建一个 IDE,其行为与 gmail 非常相似,只是样式会根据他们键入的内容自动更改。这样做的逻辑不是我在苦苦挣扎的地方。它是gmail如何实现在html中以丰富的编辑格式进行编辑的能力。据我所知,textarea 控件不能以这种方式工作,那么他们如何伪造这个功能呢?
4 回答
谷歌“内容可编辑”尝试在 Firefox 中直接按 F7 结束编辑 HTML 页面 :) Gmail 在 contenteditable="true" 的页面内使用 Frame。
另请参阅 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 小部件.
我不太确定这是否是您的意思,但是您是否正在寻找在线 WYSIWYG 编辑器?
在这种情况下,请允许我推荐CKEEditor,它非常快速、现代且强大。
您可以在相应的Wikipedia 条目中找到更广泛的列表。
您可能必须自定义任何编辑器才能编辑电子邮件(例如,您将无法使用任何预定义的 CSS 类,因此编辑器必须直接在标签),但它不应该是一个问题。
下载许多允许这样做的开源系统之一,看看他们是如何做到的。
基本上,他们将事件处理程序附加到按钮,而按钮又知道如何在光标当前位于文本区域中的位置或在文本区域中的选定区域周围插入“东西”。
我的投票是“ editarea ”,它位于基于网络的编辑器列表中:另一个 Wikipedia 条目。
我能够使用最简单的代码将其添加到现有页面中:
<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>