HTML5 rich-text inside textarea

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?

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. — Petah, May 01 '12 at 21:10

DavidTaubmann · Answer 1 · 2022-08-25T19:11:46.213

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:

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:

nicedit

We hope this helps you too!

score 7 · Answer 2 · edited Nov 23 '20 at 18:53

7

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.

edited Nov 23 '20 at 18:53

DavidTaubmann

3,223
2
34
43

answered May 01 '12 at 21:15

Florian Margaine

58,730
15
91
116

wow, amazing editor :D the toolbar is missing a lot of stuff but it looks very promising – Alex May 01 '12 at 21:21
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. – Daniel Moses May 02 '12 at 14:37
https://github.com/alohaeditor/Aloha-Editor/wiki/Browser-Support I had to dig to get this link tho :-) – Florian Margaine May 02 '12 at 14:53
3

`contenteditable` is not new. It's existed since 2000 in IE and as `designMode` in Mozilla/Firefox since 2003. – Tim Down May 03 '12 at 14:21
1

Aloha Editor is dead! – polarise Jan 15 '18 at 05:29
This solution seems to be jQuery dependant. Am I correct? – DavidTaubmann Nov 23 '20 at 18:56

score 4 · Answer 3 · answered May 01 '12 at 21:11

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.

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.

answered May 01 '12 at 21:11

Daniel Moses

5,872
26
39

1

contenteditable attribute seems to be supported by all browsers including old IE so this is not an HTML5 feature. A nice article: http://html5doctor.com/the-contenteditable-attribute/ Many years doing HTML and I didn't knew its existence.... :( – cancerbero Dec 05 '13 at 22:50
Wow, I'm just as surprised as you are. You made me look into it's history: http://blog.whatwg.org/the-road-to-html-5-contenteditable – Daniel Moses Dec 06 '13 at 16:14

MilkyWayJoe · Answer 4 · 2012-05-01T21:43:03.280

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

edited May 01 '12 at 21:43

answered May 01 '12 at 21:10

MilkyWayJoe

9,082
2
38
53

2

@MilkyWayJoe The way w3schools presents its information is just as detestable. A link to the actual specification and not unofficial information would have been better. – Snuffleupagus May 01 '12 at 21:28
3

Ya @MilkyWayJoe 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: https://developer.mozilla.org/en/HTML/Element/textarea – AlienWebguy May 01 '12 at 21:44

Stewart · Answer 5 · 2022-08-24T22:48:20.267

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).

score 1 · Answer 6 · answered Dec 03 '22 at 23:48

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>

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 — Bitfinicon, Dec 29 '22 at 20:10

HTML5 rich-text inside textarea

6 Answers6

Whitout jQuery

Linked

Related