HTML5 文本区域内的富文本

Question

我听说新的 HTML5 将为 textareas 添加富文本功能（这将使它们更加灵活），因此您可以执行代码语法高亮编辑器之类的操作，而无需非常讨厌的 javascript（例如创建 iframe 和其他东西）。

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

Answer 1

否 - jQuery

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

1. 所见即所得
2. 乡绅
3. 编辑器
4. widg编辑器

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

1. 编辑

希望这对你也有帮助！

Answer 2

您在寻找Aloha 编辑器吗？

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

看看演示。

Answer 3

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

试试http://html5demos.com/contenteditable

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

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

Answer 4

你在哪里听说过？ 看着W3Schools > HTML5 > textarea我看不到任何暗示这是真的。

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

即使在这一点上它本质上是相同的，这里是wiki textarea 的 w3.org 链接，以及 textarea 的规范。 此外，这是截至 2012 年 3 月 29 日的 html 4 和 5差异的文档

Answer 5

您可以使用 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>

Answer 6

10 年 3 个月前有人问过这个问题：HTML5 富文本 inside textarea。 我希望这个链接沿着可能的解决方案。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content有一个很好的使用可编辑内容的 RTF 示例。