HTML5 文本区域内的富文本

Question

I heard that the new HTML5 will add rich text capability to textareas (it will make them more flexible), so you can do stuff like code syntax highlighting editors without very nasty javascript (like creating iframes and stuff).

Is this true? Are there browsers with support for it yet? And where can I find some API?

Answer 1

NO - jQuery

If what you where looking for NO-jquery tools (pure HTML/CSS + basic JS) as me, then some of the best options found (back in 2016) are:

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

Nevertheless , those in the list above all convert the element (textarea) into an iframe, so they weren't exactly what I was searching for, finally I found this one which respects the original element (divs or so, but if you use textarea it does creates an additional div), allowing full straightforward JS app development:

1. nicedit

Hope this helps you too!

Answer 2

Are you looking for Aloha Editor ?

It's using the new contenteditable attribute to add a WYSIWYG editor to any div you choose.

Look at the demos .

Answer 3

I believe what you are referring to is the new contentEditable attribute. This is not a textarea, but rather an element attribute. This is good for allowing changes to content.

Try http://html5demos.com/contenteditable

Notice that your browser likely doesn't give you the toolbar with bold, italics, etc. Yet chrome will let you select text and use CTR-B, CTR-I, etc. Things are still being ironed out with this.

Basically, it's a work in progress and your best bet for browser compatability is using a wysiwyg editer like tinymce et al.

Answer 4

Where have you heard that? Looking at W3Schools > HTML5 > textarea I can't see anything that hints this is true.

Edit : added more links due to comments of people who dislike w3schools

Even tho it's essentially the same thing at this point, here's the link to w3.org for wiki textarea, as well as the spec for textarea. Also, here's the document with differences of html 4 and 5 as of march 29, 2012

Answer 5

You can use Quill instead of 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 years 3 months ago the question was asked:HTML5 rich-text inside textarea. I hope this link is along that line of possible solution. https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Editable_content Has a nice a nice example of a RTF using editable content.