HTML Javascript 富文本框 (IDE)

发布于 2024-08-17 04:20:05 字数 151 浏览 6 评论 0原文

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

月光色 2024-08-24 04:20:05

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

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

回复收藏 0 原文

(り薆情海 2024-08-24 04:20:05

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

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

您可以在相应的维基百科条目中找到更广泛的列表。

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

回复收藏 0 原文

空宴 2024-08-24 04:20:05

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

回复收藏 0 原文

撧情箌佬 2024-08-24 04:20:05

我投票给“editarea”，它位于基于网络的编辑器列表中：另一个维基百科条目。

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

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

My vote is for 'editarea' which is in the list of web based editors: Another Wikipedia entry.

I was able to add it into an existing page with the most simplistic of code:

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

回复收藏 0 原文

~没有更多了~