textarea 内的 HTML5 富文本 [关闭]

Question

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

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

Answer 1

没有 jQuery

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

1. wysihtml5
2. 乡绅
3. ckeditor
4. widg编辑器

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

1. nicedit

我们希望这也能帮助您！

Answer 2

您在寻找Aloha Editor吗？

它使用新的

contenteditable

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

查看演示。

Answer 3

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

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

尽管此时本质上是相同的，这里是 wiki 文本区域的 w3.org 链接，以及文本区域的 spec。另外，这是截至 2012 年 3 月 29 日 html 4 和 5 的差异的文档

Answer 4

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

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

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

Answer 5

10 年前 3 个月前有人提出这个问题：HTML5 rich-text inside textarea。 我希望这个链接符合可能的解决方案。 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content 有一个很好的 RT 编辑器使用可编辑内容的示例。

页面顶部有一些警告和问题。 这仍然是一个很好的例子。 该示例运行于：Chrome 版本 104.0.5112.102（官方版本）（64 位）。

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>