HTML5 rich-text inside textarea [closed]

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?

Unshackle

I have not herd of rich text inside text areas (but I haven't looked either), but you might want to look into the contenteditable attribute. – Penneypenni

Answer 1

Whitout jQuery

If what you are looking for are NO-jquery tools (pure HTML/CSS + basic JS) as us, then some of the best options found (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 we were searching for, finally we 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 WebApp development:

1. nicedit

We hope this helps you too!

Chivaree

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.

Breannebrear

wow, amazing editor :D the toolbar is missing a lot of stuff but it looks very promising – Unshackle

That looks very interesting. My testing has turned up some real pros and cons from other wysiwyg, but I'm wondering what browsers they are targeting? I couldn't find browser support information anywhere. – Romaic

github.com/alohaeditor/Aloha-Editor/wiki/Browser-Support I had to dig to get this link tho :-) – Breannebrear

contenteditable is not new. It's existed since 2000 in IE and as designMode in Mozilla/Firefox since 2003. – Paragraphia

Aloha Editor is dead! – Colis

This solution seems to be jQuery dependant. Am I correct? – Chivaree

Answer 3

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

Garbanzo

@Garbanzo The way w3schools presents its information is just as detestable. A link to the actual specification and not unofficial information would have been better. – Penney

Ya @Garbanzo I've seen that, written by a W3Schools mod. w3Schools is not affiliated with the W3C in any way but they present themselves as they if they were. Try MDN for future references, like this one: developer.mozilla.org/en/HTML/Element/textarea – Hagridden

Answer 4

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.

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.

Romaic

contenteditable attribute seems to be supported by all browsers including old IE so this is not an HTML5 feature. A nice article: html5doctor.com/the-contenteditable-attribute Many years doing HTML and I didn't knew its existence.... :( – Appositive

Wow, I'm just as surprised as you are. You made me look into it's history: blog.whatwg.org/the-road-to-html-5-contenteditable – Romaic

Answer 5

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 RT Editor using editable content.

There are some warnings.. and issues noted at the top of the page. It is a good example still. The example runs in: Chrome Version 104.0.5112.102 (Official Build) (64-bit).

Saarinen

Answer 6

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>

Catlett

Used many HTML div contenteditable libraries, none of them actually are good. They don't event consider updated dvariables and caret standing straight when setinterval is on. The best is using textarea – Pangenesis