contenteditable

Contenteditable Wordwrap

How to implement wordwrapping in a contenteditable div? By styling it as overflow-x: hidden; overflow-y: auto; I was able to make it work in Chrome but it does not work in Firefox or IE. (Facebook uses contenteditable in it's status update box, and they seem to be having the same problem too. So is this in someway a limitation of conten...

WYSIWYG development bug with formatBlock in Mozilla

Hello, I'am currently developing a WYSIWYG editor for my CMS and got serious bugs here. After switching from IFRAME to DIV contenteditable the behavior changed dramatically. Using execCommand('formatBlock') to create headlines causes unwanted BR tags to the source code, but only in Mozilla. I thought the reason could be < br _moz_dirty...

contenteditable table cells

creating a contentEditable table cell for FF allows the user to enter some text directly into the cell . while doing so the outline of the cell (I think called the focus rectangle ) is overlaid with horizontal and vertical controls. what are they, what do they do and how do you prevent them from displaying? ...

Cross-browser issues with contenteditable.

I have a DIV element with contentEditable set to 'true'. I wanted to create link elements inside this DIV, which needs to be deleted with a single backspace. I generate the link by replacing the text entered, when 'space' character is pressedI followed the suggestions given in http://stackoverflow.com/questions/2239821/backspace-doesnt-d...

Get caret position in contentEditable div

Hi, I'm finding tons of good, crossbrowser anwers on how to SET the cursor or caret position in a contentEditable DIV, but none on how to GET or find its position... What I want to do is know the position of the caret within this div, on keyup. So, when the user is typing text, I can at any point know its cursor's position within the...

replace selected text in contenteditable div

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? I simply want users to highlight some text and replace the highlighted text into xxxxx. ...

JavaScript event for contenteditable elements

Hi all, Is there a way to capture JavaScript events for when a contenteditable element begins and ends editing? Cheers - Greg. ...

Contenteditable adds a <br> when I hit space

I'm not sure why, but if you have an element with contenteditable enabled, the first time you enter a space, it'll append a <br> tag into the element. If the element has a space in it by default (<p contenteditable="true">this is a test</p>), it'll be fine, but as soon as the user hits that spacebar (or even copy+pastes a space characte...

How to format contenteditable div as you type?

I'm trying to write a function that allows a contenteditable div to do some auto formatting while the user is typing in the div. So far I only manage to make it work in IE. Anyone can help me? function formatOnKeyUp(){ if (window.getSelection) { // ??????? } else if (document.selection) { cursorPos=document.selec...

Reliable cross-browser info on ContentEditable

Hey All, I am looking for a list of web browsers that fully support using ContentEditable. I know that I.E has supported it since 5 or 5.5, but what about other browsers. I know that the modern versions of Chrome, Flock, Maxthon, Opera and I.E support it. But I don't care about the modern browsers. What about the older versions of them,...

showing context menu in contentEditable div

I have a contentEditable div with following text for example: <div contentEditable='true'> This document is classified</div> Now for example if user clicks on 'm' in word document I want to show a context menu containing few text choices. That context menu will be contained in a div element. I want to replace the word "document" with ...

Setting the caret position to an empty node inside a contentEditable element

My task is to set a text caret to appear inside an empty span node within a contentEditable div. The following gives me no problems on Firefox 3.6: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="js/jquery-1.4.3.min.js"> ...