Textarea contenteditable

Asked 14/10, 2009 at 14:56 Answered 8/7 at 17:33

I am trying to make a textarea content editable and I am failing. I am using this code:

<textarea id='' class='' name='notes' rows='12' cols='67' contenteditable='true' ></textarea>

I am expecting a result like http://html5demos.com/contenteditable

Does anyone have an idea why it's not working?

Edit:

I am doing this because I am trying to do a oneliner to add a control to a form in which (HTML) formatted content can be pasted and retain its formatting. I am trying to do this without fuss and without javascript code. It appears this is not possible. I will close this question in a day if no further input to the contrary is added.

Heronry answered 14/10, 2009 at 14:56 Comment(0)

Have you set the right doctype at the top of your page? For HTML5 you need the following doctype:

<!DOCTYPE html>

Also, why a textarea? textareas are already editable.

Bourne answered 14/10, 2009 at 15:0 Comment(3)

As on Ben's post, I was hoping for a WYSIWYG where one can paste bold text etc and retain formatting . The reason for this is that I need to post this in a form submit after it's been edited. – Heronry 14/10, 2009 at 15:5

The form will not submit the formatting. Instead put it in a div and use onSumbit to read the innerHTML of the div. – Bourne 14/10, 2009 at 15:8

Thanks Marius. I was hoping to KISS, but there we go. – Heronry 14/10, 2009 at 15:11

They are not using a textarea, textareas are already editable. This is what they are using

<section contenteditable="true" id="editable">
    <h2>Go ahead, edit away!</h2>
    <p>Here's a typical paragraph element</p>
    <ol>
      <li>and now a list</li>
      <li>with only</li>
      <li>three items</li>
    </ol>
  </section>

Fisch answered 14/10, 2009 at 14:58 Comment(3)

I was hoping for a WYSIWYG where one can paste bold text etc. The reason for this is that I need to post this in a form submit after it's been edited. – Heronry 14/10, 2009 at 15:1

I need something like this as well. I seen some people actually write its contents to a hidden field, but you would have to do this update each time you make a change or run execCommand – Pilfer 28/5, 2015 at 14:55

But section or other similar object does not support native functions like as placeholder, required, etc. The textarea canot support for content editable as html format. – Forejudge 11/3, 2017 at 22:1

I don't mean to repeat anything, but I've put together a demo that shows what is happening.

http://gist.github.com/210327

Just run that, edit what you wish and click the 'Output Formatted Content' statement to receive an alert message with an output of the actual html-formatted content in the contenteditable element. As for adding formatting, etc, you'll need to make buttons that call a text-modifying function on whatever is highlighted. Yeah, that part will be fun.

Nonetheless, I hope this helps.

Optime answered 14/10, 2009 at 19:15 Comment(1)

+1 for effort, but it's not quite what I needed... because I think what I needed is not possible. – Heronry 15/10, 2009 at 7:28

Given your comment responses, I would recommend any of the excellent WYSIWYG editors out there. No need to re-invent the wheel, and I don't think contenteditable wouldn't have met your needs anyway.

My personal favorite is CKEditor, but there are many, many others. TinyMCE is also very popular.

Nutty answered 14/10, 2009 at 15:16 Comment(1)

I was hoping for a oneliner to solve my problems (just needed a simple text area that could hold formatted text) but this is apparently not on the cards. Thanks for the suggestion though. – Heronry 15/10, 2009 at 7:27

Textarea is already input field and does not accept html tags. To pass html simply use contenteditable div and make it look like input field with CSS. Then you can pass the innerHTML value of div to your form.

<style>
.contenteditable {
    display: block;
    width: 100%;
    height: 200px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.428571429;
    color: #555555;
    vertical-align: middle;
    background-color: #ffffff;
    border-radius: 4px;
    border: 1px solid #cccccc;
    overflow:auto;
    -webkit-transition: border 500ms ease-out;
    -moz-transition: border 500ms ease-out;
    -o-transition: border 500ms ease-out;
}
    .contenteditable:focus {
        outline: none;
        box-shadow: 0 0 5px #529cdc80;
        border: 1px solid #529cdc;
    }
</style>

<div class='contenteditablestyle' contenteditable='true'><b>Bold</b> Test</div

Presuppose answered 8/7 at 17:33 Comment(0)

Recommended topics

Hot tags