Hi all, I try to explain my problem, because I really need your help. I have a <div contenteditable=true> where I define by a WYSIWYG some elements. For example <p>,<h1>, etc. I would like to put directly the focus on one of this elements. For example on <p id="p_test">. But it seems that focus() function doesn't work on <div> eleme...
Hi all, I try to explain my problem. I have a <div contenteditable="true" id="my_editeur>, where I have defined a keypress “event” which allow me to add a ‘p’ when the user clicks on “enter”. It functions well, but I would like define the cursor on this new ‘p’ element, because currently my cursor stays on the first 'p' element. I ...
Hi all, Few days ago, I have found a solution to obtain the cursor position on a div with contentedit="true". I use the solution defined on this web site : Finding cursor position in a contenteditable div function getCursorPos() { var cursorPos; if (window.getSelection) { var selObj = window.getSelecti...
Does anyone have any suggestions on how to edit an link in a contentEditable div? It would be ideal once the link is either clicked with mouse, or the cursor hits the link, that the a small prompt would pop up and allow the user to change the href property of the link. The prompt isn't the issue, but how is it possible to detect the lin...
is it possible to make a section within a contenteditable element permanent, so that a user cannot remove it? I have an h2 tag in a contentEditable div. I don't want the user to edit the h2 tag, so I set contentEditable=false, but the user can still select and remove it, which I want to disallow. So, for ex: <div contentEditable="tr...
I'm exploring the idea of using contenteditable on a website at visitor comments and at a message board. As I only wish to accept a white-list of HTML tags and attributes the question of when and how should I validate the entered HTML content comes up. How would you do it? What cross-browser solutions would you choose to use? What even...
Hello, I'm trying to set the caret position in a contenteditable div layer, and after a bit of searching the web and experimenting I got it to work in firefox using this: function set(element,position){ element.focus(); var range= window.getSelection().getRangeAt(0); range.setStart(element.firstChild,position); range.set...
When pressing enter in <div contenteditable="true"> </div> in firefox <br /> is produced - that's ok. But in Chrome or IE a new <div> or <p> is created. What should I do to make Chrome and IE behave like Firefox . ...
In Firefox and IE when you enable contentEditable on a div that contains an image, the image gets handles when clicked on that allow you to resize it. I'm struggling to find an event that fires after the resize occurs. I want to be able to update a properties inspector with the correct height and width values when the resize takes place....
I've got a table that you can edit, and I've got a simple code saving that list when you're done with editing it. (the tables have the contenteditable on) The problem I've stumbled upon is that if I double click on enter, the table gets divided into two separate tables with the same ID. This causes the code I'm using to set the localSt...
I'm working on a jQuery plugin that will allow you to do @username style tags, like Facebook does in their status update input box. My problem is, that even after hours of researching and experimenting, it seems REALLY hard to simply move the caret. I've managed to inject the <a> tag with someone's name, but placing the caret after it s...
I am writing some code to find the user selection in a contenteditable div, I'm taking my code from this quirksmode article. function findSelection(){ var userSelection; if (window.getSelection) {userSelection = window.getSelection;} else if (document.selection){userSelection = document.selection.createRange();} // For microsoft...
I would just like to have an editable div that acts like a textarea that is given focus on page load (i.e. the blinking cursor is visible and typing shows up in the div without having to select the div with the mouse). I've tried calling focus() on the editable div, but that doesn't work. ...
I have read a few posts on positioning the caret, but none seem to answer my particular issue. I have 2 divs (div1 and div2) div1 = noneditable div div2 = contenteditable div both divs contain exact same contents when user clicks on div1, it gets hidden, and div2 appears in exact location and user can edit The problem: I want the car...
Hi all, I've created an editable div, and I want to replace smiley signs with smiley images. But whenever I replace a string with a dom element (<img> or <span> or whatever..), the div stops being editable (i.e. I can see the caret when I click on text, but can add no characters to it). What's going on? (I'm doing this in Safari) He...
Hi guys, I am using contenteditable div elements in my web application and I am trying to come up with a solution to limit the amount of characters allowed in the area, and once the limit is hit, attempting to enter characters simply does nothing. This is what I have so far: var content_id = 'editable_div'; //binding keyup/down events...
The old version of the question is below, after researching more, I decided to rephrase the question. The problem as before is, I need to focus a contenteditable div without highlighting the text, doing straight up focus highlights the text in Chrome. I realize that people solved this problems in textareas by resetting the caret positio...
I have a contenteditable div where I need to insert text at the caret position, This can be easily done in IE by document.selection.createRange().text = "banana" Is there a similar way of implementing this in Firefox/Chrome? (I know a solution exists here , but it can't be used in contenteditable div, and looks clumsy) Thank you! ...
I've got the following problem. In IE if a contenteditable element is nested inside a hyperlink, clicking on the element prevents the hyperlink default behavior, i.e. navigation to another document. In FF it works fine. How can I solve the problem? Just removing the contentEditable attribute is not a solution since I want this behavior (...
How can I (using jquery or other) insert html at the cursor/caret position of my contenteditable div: <div contenteditable="true">Hello world</div> For example, if the cursor/caret was between "hello" and "world" and the user then clicked a button, eg "insert image", then using javascript, something like <img src=etc etc> would be ins...