文本框内的HTML5富文本

Question

我听说新的HTML5将在文本区域中添加富文本功能(使它们更加灵活)，因此您可以使用一些像代码语法高亮编辑器这样的工具而不需要非常糟糕的javascript(比如创建iframes等)。

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

- Alex

---

我没有听说过文本区域内的富文本（但我也没有去查），但你可能想要研究一下contenteditable属性。 - Petah

Answer 1

没有jQuery

如果你正在寻找没有jQuery的工具（纯HTML/CSS + 基本JS）像我们一样，那么在2016年发现的最佳选择之一是：

1. wysihtml5
2. Squire
3. ckeditor
4. widgEditor

然而，上面列出的这些都将元素(文本区域)转换为iframe，所以它们并不完全符合我们的需求, 最后我们找到了这个，它尊重原始元素(div或者其他，但如果你使用textarea，它会创建一个额外的div)，允许完全直观的JS WebApp开发:

1. nicedit

希望这也能对你有所帮助！

- DavidTaubmann

Answer 2

您是否正在寻找Aloha Editor？

它使用新的contenteditable属性，将所选任何

添加到所选的WYSIWYG编辑器中。

请查看演示。

- Florian Margaine

---

哇，太棒了的编辑器 :D 工具栏缺少很多东西，但它看起来非常有前途。 - Alex

看起来非常有趣。我的测试从其他所见即所得编辑器中发现了一些真正的优缺点，但我想知道它们针对哪些浏览器？我无法在任何地方找到浏览器支持信息。 - Daniel Moses

https://github.com/alohaeditor/Aloha-Editor/wiki/Browser-Support 我必须挖掘才能获得此链接 :-) - Florian Margaine

contenteditable 并不是新的概念。它自2000年在IE浏览器中就已存在，并且自2003年起在Mozilla/Firefox浏览器中作为 designMode 使用。 - Tim Down

Aloha Editor已经停止更新了！ - polarise

这个解决方案似乎依赖于jQuery。我说得对吗？ - DavidTaubmann

Answer 3

你在哪里听说的？查看 W3Schools > HTML5 > textarea ，我没有看到任何暗示这是真的。

编辑：由于不喜欢w3schools的评论，添加了更多链接

尽管它基本上是同样的事情，但这是关于wiki textarea的w3.org链接，以及textarea的spec。此外，这是一个关于html 4和5差异的文档，截至2012年3月29日differences。

- MilkyWayJoe

---

@MilkyWayJoe，w3schools呈现信息的方式同样令人厌恶。提供实际规范的链接而非非官方信息会更好。 - Snuffleupagus

嗨，@MilkyWayJoe，我看过那个文章，是由一个W3Schools的版主写的。w3Schools与W3C没有任何关联，但他们把自己描述得好像有关联一样。将来可以尝试使用MDN作为参考，例如这个链接：https://developer.mozilla.org/en/HTML/Element/textarea - AlienWebguy

Answer 4

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

请尝试http://html5demos.com/contenteditable 请注意，您的浏览器可能不会显示粗体、斜体等工具栏。但Chrome将允许您选择文本并使用CTR-B、CTR-I等。这些问题仍在解决中。

基本上，这是一个正在进行中的工作，您最好选择像tinymce等所提供的所见即所得编辑器以获得浏览器兼容性。

- Daniel Moses

---

contenteditable属性似乎被所有浏览器支持，包括旧版IE，因此这不是HTML5的特性。这是一篇不错的文章：http://html5doctor.com/the-contenteditable-attribute/ 我做HTML已经很多年了，但我竟然不知道它的存在.... :( - cancerbero

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

Answer 5

10年3个月前，有人问了这个问题：如何在文本框内使用HTML5富文本。我希望这个链接可以作为解决方案。

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content

它展示了一个使用可编辑内容的RT编辑器的很好的例子。页面顶部提到了一些警告和问题，但仍然是一个好的例子。该示例运行于Chrome版本104.0.5112.102 (Official Build) (64-bit)。

- Stewart

Answer 6

您可以使用Quill代替TextArea：https://quilljs.com/docs/quickstart/。

<!-- Include stylesheet -->
<link href="https://cdn.quilljs.com/1.3.6/quill.snow.css" rel="stylesheet">

<!-- Create the editor container -->
<div id="editor">
  <p>Hello World!</p>
  <p>Some initial <strong>bold</strong> text</p>
  <p><br></p>
</div>

<!-- Include the Quill library -->
<script src="https://cdn.quilljs.com/1.3.6/quill.js"></script>

<!-- Initialize Quill editor -->
<script>
  var quill = new Quill('#editor', {
    theme: 'snow'
  });
</script>

- Silvio Guedes

---

使用了许多HTML div contenteditable库，但它们实际上都不是很好。它们甚至没有考虑到更新的变量和当setinterval启用时光标的位置。最好的方法是使用textarea。 - Bitfinicon

使用了许多HTML div contenteditable库，但实际上没有一个好用的。它们甚至不考虑更新的变量和当setinterval启动时光标的位置。最好的方法是使用textarea。 - Bitfinicon