contenteditable

Facebook like status input

Is there a ready similar input like the status input in Facebook? I mean, they use a contenteditable div, and they've wrapped it all pretty good. They can resize it (on focus/blur), an it continues word-wrapping and expanding, and when you type a really long word in their input, which can't be wrapped, it stays inside the div and doesn't...

How to avoid WebKit contentEditable copy-paste resulting in unwanted CSS?

I have a <div> that has contentEditable="true". When I copy-paste content within the editable div, the pasted text gets wrapped into a lot of unwanted CSS. For example, this: <p>text text</p> becomes: <p style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-botto...

Preserve text selection in contenteditable while interacting with jQuery UI Dialog and text input.

I have a jQuery dialog for making links in a contentEditable span. The problem is that clicking a button to open the dialog causes the selection to be lost, text input inside the dialog also causes the selection to be lost. I can fix the button with -moz-user-select:none; but -webkit-user-select:none doesn't work in Chrome. I can fix t...

HTML / JAVASCRIPT : Disable HTML CONTENT in contentEditable=true

What I want? I want a div what works like a textarea, I don't want to have the ability to edit things in the div, and paste images and so on just plain text. Example www.facebook.com - The best example is facebook's news feed. Why I need this way? If you check out facebook's news feed, you well see that the area where you can...

Facebook Status Update-Like Autocomplete/Tagging Feature with jQuery

I'd like to create a text input like the Facebook status update Publisher. Basically, an input that can activate an tagging/autocomplete feature with a certain key (ex: @), creating tags that act as single characters in the text input (can be deleted with a single backspace), and yet still accept regular text input. Different from Facebo...

The State of contenteditable

The State of contenteditable The markup produced by wysiwyg editors is atrocious. Its littered with style attributes and often is not even valid HTML (missing closing tags, overlapping styling, etc). Are there any established solutions to the problems introduced by contenteditable? If not, how can I go about creating one? Invalid HT...

contenteditable pasting image from clipboard

Am using jwysiwyg and customizing it quite a bit. Wondering if anyone has any links or info on how to support pasting images from the clipboard in a contenteditable element. Many RTEs support this so it has to be doable. ...

Firefox contentEditable div focus issues

Hello, I am using contentEditable div tags on my website and I have noticed a weird issue when using Firefox. Here is example source code: <html> <head> </head> <body> <div contentEditable="true" style="margin-left:auto; margin-right:auto; height:200px; width:200px; border-style:solid; border-color:black...

HTML: contentEditable troubles

Hello, I have this simple HTML: <html><body> <input><div contenteditable="true" style="border:1px #7f9db9 solid; width:100px; height:20px;"></div> </body></html> It shows two input boxes. When I type something into the 2nd one, then go at the very beginning of the row (hit Home-key), then I hit Backspace, the text jumps at the end of...

Javascript::How to identify what the character (or string) was inserted on a editable div?

I want to know how to identify what the character inserted on a div editable... I want to see if the user type a single or double quotation mark, and give a specific class to this quote to the text after the quote... I think that is a onkey property or return... i don't know... Anyone has a tip ? ...

Extracting text from a contentEditable div

I have a div set to contentEditable and styled with "white-space:pre" so it keeps things like linebreaks. In Safari, FF and IE, the div pretty much looks and works the same. All is well. What I want to do is extract the text from this div, but in such a way that will not lose the formatting -- specifically, the line breaks. We are using...

insertHTML execCommand BEFORE cursor caret in a contenteditable div

People seem to love to answer this question everywhere online while ignoring the CONTENTEDITABLE div requirement. Using code that seems to only work on input fields or textareas and not divs. Additionally, most questions people have wanted to put the cursor caret INSIDE the newly inserted HTML... which is weird, because it does it autom...

Pasting to contentEditable Div inserts other HTML automatically.

I'm using a div with the contentEditable attribute to meet my need as a simple, cross-browser solution to expanding text-fields, but I've encountered an interesting problem. Here's the div : <div id="expanderInput" class="inputDiv" contentEditable></div> Here's where I grab it in jquery : var forwardsTo = $expanderInput.html(); I...

Browser detect contenteditable features

I realise browser detection is not generally a good idea, however as each browser has a different implementation of contenteditable, I need a way to separate out my fixes for each. Specifically: gecko and webkit require a <br /> to be inserted at the end of empty paragraphs, otherwise they are automatically deleted. ie and opera treat...

Disable Automatic URL detection for Elements with 'contentEditable' flag in IE

Hi, When i paste any text in any element with 'contentEditable' flag enabled, IE automatically finds the hyperlinks or email address and replaces them with <a href="hyperlink">hyperlink</a>. How can i disable this automatic url detection for elements(e.g. div, span etc.) with 'contentEditable' flag in IE or aleast get the actual text...

How do I figure out why the contenteditable attribute doesn't work?

Hey All, I seem to be having an issue with some of my css/javascript. I can't seem to be able to get contentEditable to work in my webapp. I was inspired by the answer to this post to try this method. I've tested my browser here and it works fine. Are there any css rules I should be aware of that may be causing it to not work? I can s...

How can you catch a contentEditable paste event?

I've got a great editable text area going with wysihat and contentEditable. I really need a way to intercept paste events to either stop them, or process their DOM before allowing insertion. It's a little crazy they people can paste entire webpages into the editable areas. Is this possible? Come on future, arrive on my doorstep. HTM...

Browser-based visual editor/designer?

Is there an example of a browser-based and preferably open source visual javascript application designer (using contenteditable or canvas or whatever), perhaps with support for embedded controls and so forth (checkboxes, buttons, etc., or ui controls for various javascript frameworks like jquery.ui, dojo, yui,...), OR else support for ve...

Span tag inside contentEditable div needs keypress event

I have the following div in my html code: <div id="expanderInput" tabIndex="1" contentEditable></div> I'm using a contentEditable div as a simple, cross-browser method of making an auto-expanding textbox. I'm also doing input validation on what the user enters into this div. It is supposed to be a list of email addresses separated b...

CTRL-A inside a contentEditable div in Firefox selects the div itself

I've been pulling my hair out trying to figure out the best way to fix this problem. Perhaps someone will have fun with this. I have a div with contentEditable="true" that works fine for nearly everything. One exception is inside Firefox when the user uses CTRL-A to select everything and then copies/pastes. The select operation inclu...