文本区域内的 HTML5 富文本

Posted 2023-05-07

【中文标题】文本区域内的 HTML5 富文本

【英文标题】：HTML5 rich-text inside textarea

【发布时间】：2012-05-11 08:53:19

【问题描述】：

我听说新的 html5 将为 textareas 添加富文本功能（这将使它们更加灵活），因此您可以在没有非常讨厌的 javascript 的情况下执行代码语法高亮编辑器之类的操作（例如创建 iframe 和其他内容）。

这是真的吗？是否有支持它的浏览器？我在哪里可以找到一些 API？

【问题讨论】：

我在文本区域内没有大量富文本（但我也没有查看），但您可能想查看 contenteditable 属性。

【参考方案1】：

没有 jQuery

​​>

如果您像我们一样在寻找 NO-jquery 工具（纯 HTML/CSS + 基本 JS），那么找到的一些最佳选择（早在 2016 年）是：

wysihtml5 Squire ckeditor widgEditor

尽管如此，上面列表中的那些都将元素 (textarea) 转换为 iframe，所以它们并不是我们要搜索的内容，最后我们找到了这个 尊重原始元素（divs 左右，但如果你使用 textarea 它会创建一个额外的 div），允许完全直接的 JS 应用程序开发：

nicedit

我们希望这对您也有帮助！

【参考方案2】：

你在找Aloha Editor吗？

它使用新的contenteditable 属性将所见即所得编辑器添加到您选择的任何 div。

看看demos。

【讨论】：

哇，很棒的编辑器：D 工具栏缺少很多东西，但看起来很有希望

这看起来很有趣。我的测试从其他所见即所得中发现了一些真正的优点和缺点，但我想知道他们针对的是哪些浏览器？我在任何地方都找不到浏览器支持信息。

github.com/alohaeditor/Aloha-Editor/wiki/Browser-Support 我不得不挖掘才能得到这个链接 :-)

contenteditable 并不新鲜。它自 2000 年以来在 IE 中存在，自 2003 年以来在 Mozilla/Firefox 中以 designMode 的形式存在。

Aloha Editor 死了！

【参考方案3】：

我相信您所指的是新的 contentEditable 属性。这不是文本区域，而是元素属性。这对于允许更改内容很有用。

试试http://html5demos.com/contenteditable

请注意，您的浏览器可能不会为您提供带有粗体、斜体等的工具栏。但 chrome 将允许您选择文本并使用 CTR-B、CTR-I 等。问题仍在解决中。

基本上，这是一项正在进行的工作，您最好使用像 tinymce 等所见即所得编辑器这样的浏览器兼容性。

【讨论】：

contenteditable 属性似乎受到包括旧 IE 在内的所有浏览器的支持，因此这不是 HTML5 功能。一篇不错的文章：html5doctor.com/the-contenteditable-attribute 做了很多年 HTML 却不知道它的存在.... :(

哇，我和你一样惊讶。你让我了解了它的历史：blog.whatwg.org/the-road-to-html-5-contenteditable

【参考方案4】：

你从哪里听说的？ 看着W3Schools > HTML5 > textarea，我看不出任何暗示这是真的。

编辑：由于不喜欢 w3schools 的人的 cmets 添加了更多链接

即使在这一点上本质上是一样的，这里是指向 w3.org 的wiki textarea 的链接，以及spec 的 textarea 链接。另外，这是截至 2012 年 3 月 29 日的带有differences 的 html 4 和 5 的文档

【讨论】：

@MilkyWayJoe w3schools 展示其信息的方式同样令人厌恶。一个指向实际规范而不是非官方信息的链接会更好。

是的 @MilkyWayJoe 我已经看到了，由 W3Schools 模组编写。 w3Schools 不以任何方式隶属于 W3C，但他们表现得就像他们一样。尝试 MDN 以供将来参考，例如：developer.mozilla.org/en/HTML/Element/textarea