I am storing content in the database, for example:

    Hello
    This
    is 
    Text

and when I pass that to a textarea, it stays with the new line breaks. But if I pass that text to a div with content editable, it would stay like this:

    Hello This is Text

How can I fix this problem?

HTML - Newline char in DIV content editable?

Besides the new Google Docs, all the other WYSIWYG web-based rich text editors (ckeditor, tinymce, old Google Docs) I&#39;ve seen are based on contenteditable or designMode. I personally hate using these editors. It doesn&#39;t take much formatting or copying/pasting before the whole experience turns into an exercise in frustration. Returns suddenly start getting double-spaced, unintended formatting gets introduced via pasting from other HTML sources, undo&#39;s/redo&#39;s are completely broken, formatting becomes excruciatingly difficult to control, etc.

I believe this is one of the reasons Google Docs introduced its own much more constrained, non-HTML formatting engine. Is there any open-source library out there that provides something similar? Thanks in advance.

Any WYSIWYG rich text editor that doesn&#39;t use HTML (contenteditable or designMode), a la (the new) Google Docs?

When a divs value is changed, how Can I trigger an event?

    &lt;div class=&quot;changeable&quot; contenteditable=&quot;true&quot;&gt; Click this div to edit it &lt;div&gt;

So when its content changes I want to create an alert and/or do other things:

    $(&#39;.changeable&#39;).text().change(function() {
      alert(&#39;Handler for .change() called.&#39;);
    });


trigger an event when contenteditable is changed

I have this simple HTML as an example:

    &lt;div id=&quot;editable&quot; contenteditable=&quot;true&quot;&gt;
      text text text&lt;br&gt;
      text text text&lt;br&gt;
      text text text&lt;br&gt;
    &lt;/div&gt;
    &lt;button id=&quot;button&quot;&gt;focus&lt;/button&gt;

I want simple thing - when I click the button, I want to place caret(cursor) into specific place in the editable div. From searching over the web, I have this JS attached to button click, but it doesn&#39;t work (FF, Chrome):

    var range = document.createRange();
    var myDiv = document.getElementById(&quot;editable&quot;);
    range.setStart(myDiv, 5);
    range.setEnd(myDiv, 5);

Is it possible to set manually caret position like this ?

How to set the caret (cursor) position in a contenteditable element (div)?

I have a `contenteditable` element, and whenever I type some stuff and hit `ENTER` it creates a new `&lt;div&gt;` and places the new line text in there. I don&#39;t like this one little bit. 

Is it possible to prevent this from happening or at least just replace it with a `&lt;br&gt;`?

Here is demo **http://jsfiddle.net/jDvau/**


Note: **This is not an issue in firefox.**

Prevent contenteditable adding &lt;div&gt; on ENTER - Chrome

I&#39;m finding tons of good, cross-browser answers on how to _set_ the caret position in a `contentEditable` element, but none on how to _get_ the caret position in the first place.

What I want to do is know the caret position within a div on `keyup`. So, when the user is typing text, I can, at any point, know the caret position within the `contentEditable` element.

    &lt;div id=&quot;contentBox&quot; contentEditable=&quot;true&quot;&gt;&lt;/div&gt;

    $(&#39;#contentbox&#39;).keyup(function() { 
        // ... ? 
    });

Get contentEditable caret position

How do I listen to change event for `contentEditable`-based control?

    var Number = React.createClass({
        render: function() {
            return &lt;div&gt;
                &lt;span contentEditable={true} onChange={this.onChange}&gt;
                    {this.state.value}
                &lt;/span&gt;
                =
                {this.state.value}
            &lt;/div&gt;;
        },
        onChange: function(v) {
            // Doesn&#39;t fire :(
            console.log(&#39;changed&#39;, v);
        },
        getInitialState: function() {
            return {value: &#39;123&#39;}
        }    
    });

    React.renderComponent(&lt;Number /&gt;, document.body);

http://jsfiddle.net/NV/kb3gN/1621/

React.js: onChange event for contentEditable

I am after a definitive, cross-browser solution to set the cursor/caret position to the last known position when a contentEditable=&#39;on&#39; &amp;lt;div&gt; regains focus.  It appears default functionality of a content editable div is to move the caret/cursor to the beginning of the text in the div each time you click on it, which is undesirable.

I believe I would have to store in a variable the current cursor position when they are leaving focus of the div, and then re-set this when they have focus inside again, but I have not been able to put together, or find a working code sample yet.

If anybody has any thoughts, working code snippets or samples I&#39;d be happy to see them.


I don&#39;t really have any code yet but here is what I do have:

    &lt;script type=&quot;text/javascript&quot;&gt;
    // jQuery
    $(document).ready(function() {
       $(&#39;#area&#39;).focus(function() { .. }  // focus I would imagine I need.
    }
    &lt;/script&gt;
    &lt;div id=&quot;area&quot; contentEditable=&quot;true&quot;&gt;&lt;/div&gt;

*PS. I have tried this resource but it appears it does not work for a &amp;lt;div&gt;.  Perhaps only for textarea ([https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity][1])*


  [1]: https://stackoverflow.com/questions/1125292/how-to-move-cursor-to-end-of-contenteditable-entity


Set cursor position on contentEditable &lt;div&gt;

In JavaScript, it&#39;s possible to programmatically select text in an `input` or `textarea` element. You can focus an input with `ipt.focus()`, and then select its contents with [`ipt.select()`](https://developer.mozilla.org/en/DOM/Input.select). You can even select a specific range with [`ipt.setSelectionRange(from,to)`](https://developer.mozilla.org/en/DOM/Input.setSelectionRange).

My question is: is there any way to do this in a `contenteditable` element too? 

I found that I can do `elem.focus()`, to put the caret in a `contenteditable` element, but subsequently running `elem.select()` doesn&#39;t work (and nor does `setSelectionRange`). I can&#39;t find anything on the web about it, but maybe I&#39;m searching for the wrong thing...

By the way, if it makes any difference, I only need it to work in Google Chrome, as this is for a Chrome extension.

Programmatically select text in a contenteditable HTML element?

output in &lt;strong&gt;Chrome&lt;/strong&gt;:

    &lt;div id=&quot;content&quot; contenteditable=&quot;true&quot; style=&quot;border:1px solid #000;width:500px;height:40px;&quot;&gt;
        hey
        &lt;div&gt;what&#39;s up?&lt;/div&gt;
    &lt;div&gt;
    &lt;button id=&quot;insert_caret&quot;&gt;&lt;/button&gt;

I believe in &lt;strong&gt;FF&lt;/strong&gt; it would look something like this:

    hey
    &lt;br /&gt;
    what&#39;s up?

and in &lt;strong&gt;IE&lt;/strong&gt;:

    hey
    &lt;p&gt;what&#39;s up?&lt;/p&gt;

unfortunately, there is no nice way of making it so that every browser inserts a `&lt;br /&gt;` instead of a div- or p-tag, or at least I couldn&#39;t find anything online.

&lt;hr&gt;

ANYWAY, what I am trying to do now is, when I hit the &lt;strong&gt;button&lt;/strong&gt;, I want the caret to be set at the end of the text, so it should look something like this:

    hey
    what&#39;s up?|

any way to do this so it works in &lt;strong&gt;all browser&lt;/strong&gt;?

example:

    $(document).ready(function()
    {
        $(&#39;#insert_caret&#39;).click(function()
        {
            var ele = $(&#39;#content&#39;);
            var length = ele.html().length;

            ele.focus();

            //set caret -&gt; end pos
         }
     }

contenteditable, set caret at the end of the text (cross-browser)

When I set a pre element to contenteditable and put focus in it for editing, it receives a dotted border around it that doesn&#39;t look very nice. The border isn&#39;t there when focus is somewhere else.  
How do I remove that border?

Thanks

How do I remove the border around a focused contenteditable pre?

I need to move caret to end of `contenteditable` node like on Gmail notes widget.

I read threads on StackOverflow, but those solutions are based on using inputs and they doesn&#39;t work with `contenteditable` elements.

How to move cursor to end of contenteditable entity

I have a `&lt;div contenteditable=true&gt;` where I define by a WYSIWYG some elements. For example `&lt;p&gt;`,`&lt;h1&gt;`, etc.  I would like to directly put the focus on one of these elements. 

For example on `&lt;p id=&quot;p_test&quot;&gt;`. But it seems that `focus()` function doesn&#39;t work on `&lt;div&gt;` elements, `&lt;p&gt;` elements... 

Is there another means to define the focus in my case?

Set focus on div contenteditable element

I want to run a function when a user edits the content of a `div` with `contenteditable` attribute. What&#39;s the equivalent of an `onchange` event?

I&#39;m using jQuery so any solutions that uses jQuery is preferred. Thanks!

contenteditable change events

I have a div with contenteditable set and I am capturing keypress using jquery to call preventDefault() when the enter key is pressed. Similar to  [this question](https://stackoverflow.com/questions/2920150/insert-text-at-cursor-in-a-content-editable-div) which inserts text at the cursor, I would like to directly insert html, for brevity we&#39;ll say its a br tag. Using the answer to the question above actually works in IE as it uses the range.pasteHTML method, but in other browsers the br tag  would appear as plain text and not html. How could I modify the answer to insert html and not text ?

Insert html at caret in a contenteditable div

As I&#39;m paranoid more with online breach, recently noticed that Google chrome elements upon click showing cursor blink and that&#39;s spooky. HTML page elements became editable?   It&#39;s not happening with Mozilla, and the extensions enabled on chrome are,
- Apollo Client Developer Tools,
- Authenticator
- Vue.JS Tools

On Firefox, it&#39;s allowing to select and no cursor blinks and that&#39;s the default behaviour.

Demo of problem:

[![GIF][1]][1]



  [1]: https://i.stack.imgur.com/jb4TA.gif

Google Chrome weird cursor blink on pages, never seen &#39;em before

I have a contenteditable div where I need to insert text at the caret position,

This can be easily done in IE by &lt;code&gt; document.selection.createRange().text = &quot;banana&quot; &lt;/code&gt;

Is there a similar way of implementing this in Firefox/Chrome?

(I know a solution exists [here][1] , but it can&#39;t be used in contenteditable div, and looks clumsy)

Thank you!


  [1]: https://stackoverflow.com/questions/1621931/insert-text-on-the-current-place-of-the-cursor-in-the-browser/1884285#1884285

Insert text at cursor in a content editable div

I have a problem with `contenteditable` line breaks on SAFARI/CHROME. When I press &quot;return&quot; on a contentEditable `&lt;div&gt;`, instead of creating a `&lt;br&gt;` (like Firefox), they create a new `&lt;div&gt;`:

    &lt;div&gt;Something&lt;/div&gt;
    &lt;div&gt;Something&lt;/div&gt;

That looks like (on the contentEditable DIV):

    Something
    Something

But after sanitization (removing `&lt;div&gt;`), I get this:

    SomethingSomething

In Firefox, the `contenteditable` is:

    Something
    &lt;br&gt;
    Something

And that after sanitization looks the same:

    Something
    Something

Is there any solution to &quot;normalize&quot; this across browsers?

I&#39;ve found this code on https://stackoverflow.com/questions/3080529/make-a-br-instead-of-div-div-by-pressing-enter-on-a-contenteditable


    $(function(){

      $(&quot;#editable&quot;)

      // make sure br is always the lastChild of contenteditable
      .live(&quot;keyup mouseup&quot;, function(){
        if (!this.lastChild || this.lastChild.nodeName.toLowerCase() != &quot;br&quot;) {
          this.appendChild(document.createChild(&quot;br&quot;));
         }
      })

      // use br instead of div div
      .live(&quot;keypress&quot;, function(e){
        if (e.which == 13) {
          if (window.getSelection) {
            var selection = window.getSelection(),
              range = selection.getRangeAt(0),
              br = document.createElement(&quot;br&quot;);
            range.deleteContents();
            range.insertNode(br);
            range.setStartAfter(br);
            range.setEndAfter(br);
            range.collapse(false);
            selection.removeAllRanges();
            selection.addRange(range);
            return false;
          }
        }
      });
    });

This works, but **(in SAFARI and CHROME)** I have to press two times the &quot;return&quot; key to get a new line... 

Any idea?

**Edit**: With the code I found ( at the bottom of this question) is working fine except the function that &quot;makes sure a `&lt;br&gt;` element is always the lastChild... Any idea on how to fix this?

**Edit 2:** I&#39;m getting this error on the console: `Uncaught TypeError: Object #&lt;HTMLDocument&gt; has no method &#39;createChild&#39;`

**Edit 3:** Ok, I changed the `document.createChild(&quot;br&quot;);` to `document.createElement(&quot;br&quot;);` and I think I got it working in FF/Safari/Chrome... All return `&lt;br&gt;` for new lines... 

**The problem is now that when I&#39;m inside an Ordered or Unordered List, I need to get a new line without `&lt;br&gt;`...**

**Edit 4:** If anyone interested in the solution of the last edit: https://stackoverflow.com/questions/6024594/avoid-createelement-function-if-its-inside-a-li-element-contenteditable


Dealing with line Breaks on contentEditable DIV

For an application we&#39;re developing at the company where I work, we need an input that supports inserting emoticons inside our JS-based web app. We&#39;re currently using an input with the emoticon shortcodes (ie &#39;:-)&#39;) and would like to switch to inserting actual, graphical images.

Our original plan was to use a `contenteditable` `&lt;div&gt;`. We&#39;re using listeners for the paste event as well as the different key/mouse interactions to ensure no unwanted markup enters the contenteditable (we strip text out of its container tags and leave only image tags that we inserted ourselves).

However, the problem right now is that the div resizes if you put in enough content (ie its height increases). We don&#39;t want this to happen, nor is it acceptable for the text to just be hidden (ie plain `overflow: hidden`). So:

**Is there a way to make the contenteditable div behave like a single-line input?**

I&#39;d like it best if there is a relatively simple attribute/css property that I&#39;ve missed that will do what I want, but if necessary CSS+JS suggestions will also be appreciated.

contenteditable single-line input

I have been trying to ask this before, without any luck of explaining/proving a working example where the bug happens. So here is another try:

I’m trying to replicate a placeholder effect on a contenteditable DIV. The core concept is simple:
    
    &lt;div contenteditable&gt;&lt;em&gt;Edit me&lt;/em&gt;&lt;/div&gt;

    &lt;script&gt;
    $(&#39;div&#39;).focus(function() {
        $(this).empty();
    });
    &lt;/script&gt;

This can sometomes work, but if the placeholder contains HTML, or if there some other processing being made, the editable DIV’s text caret is being removed, and the user must re-click the editable DIV to be able to start typing (even if it’s still in focus):

Example: http://jsfiddle.net/hHLXr/6/

I can’t use a focus trigger in the handler, since it will create an event loop. So I need a way to re-set the caret cursor in the editable DIV, or in some other way re-focus.


Placeholder in contenteditable - focus event issue

I am trying to use ngModel to two way bind div&#39;s contenteditable input content as follows:


    &lt;div id=&quot;replyiput&quot; class=&quot;btn-input&quot;  [(ngModel)]=&quot;replyContent&quot;  contenteditable=&quot;true&quot; data-text=&quot;type...&quot; style=&quot;outline: none;&quot;    &gt;&lt;/div&gt; 

but it is not working and an error occurs:

    EXCEPTION: No value accessor for &#39;&#39; in [ddd in PostContent@64:141]
    app.bundle.js:33898 ORIGINAL EXCEPTION: No value accessor for &#39;&#39;

How to use [(ngModel)] on div&#39;s contenteditable in angular2?

I have been looking high and low for an answer but failed.

Is there a cross-browser solution to replace selected text in *contenteditable* div? &lt;br&gt;
I simply want users to highlight some text and replace the highlighted text with `xxxxx`.


replace selected text in contenteditable div

I have contentEditable element (can be p, div, ...) and I would like to get caret (cursor) position in it. I can normally achieve it with this piece of code:

    var position = window.getSelection().getRangeAt(0).startOffset;

This works fine while the element contains just text. But when the element contains some HTML formatting, the returned position is relative to caret position within included HTML element.

Let&#39;s assume contents of contentEditable element is this:

    AB&lt;b&gt;CD&lt;/b&gt;EF

If caret is inside `&lt;b&gt;&lt;/b&gt;`, let&#39;s say between C and D, the returned position with above code is 1 instead of 3 (counted from the begining of the contentEditable element&#39;s content)

Can anybody come up with solution to this ?

Get caret (cursor) position in contentEditable area containing HTML content

Do you know how to make a `&lt;div&gt;` editable with JavaScript? I&#39;m looking for cross-browser solution.

Something similar to a rich text area, but that uses an editable `&lt;iframe&gt;`. I need something similar for a `&lt;div&gt;`.   
*I don&#39;t want to use a replacement textbox.*

How to make an HTML &lt;div&gt; element editable cross-browser?

When using contentEditable in Firefox, is there a way to prevent the user from inserting paragraph or line breaks by pressing enter or shift+enter?

Prevent line/paragraph breaks in contentEditable

Would I be shooting myself in the foot by using a div with attribute `contentEditable=&quot;true&quot;` as a text field rather than a textarea? 

All Contenteditable Solutions on Gang of Coders

Total of 26 Contenteditable Solutions