Hello, I am working on a Javascript WYSIWYG editor in Firefox. I am using a div with the contenteditable attribute set to true in order to accomplish this (I cannot use a contenteditable iframe for this particular project). This contenteditable div is nested in another div that is not contenteditable. I am encountering the following t...
I got multiple <p contenteditable="true"></p> elements on a page. I'm looking for a solution to use arrow keys for navigating across those disjoint elements just as if they were one single editable element. So for instance, if the caret is at the 10th character on the last line of the 1st paragraph and the user hits the down arrow key, ...
Strangely this is broken only in Firefox and Opera (IE, Chrome and Safari works as it should). Any suggestions for a quick fix? <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui....
There are numerous WYSIWYG editors available on the internet, but I'm yet to find one that implements some form of drag-n-drop implementation. It is easy to create one's own editor, but I want to the user to be able to drag elements (ie. tokens) from outside the editable area and have them drop it at a location of their choice inside th...
Okay, some Guys will know what i mean and edit my Question but they did it wrong. A better explanation: You have a contenteditable div with the text This is a Test String.. If you use now the execCommand('underline') on Test String you get This is a <u>Test String</u> if you use now the execCommand('strikethrough') on is a Test you get...
Is it possible to disable the drag-and-drop functionality on elements which have the contentEditable attribute set to true. I have the following HTML page. <!DOCTYPE html> <html><meta charset="utf-8"><head><title>ContentEditable</title></head> <body> <div contenteditable="true">This is editable content</div> <span>This is not e...
Hello, I am developing a webpage editor tool which is based around using an iframe to load the page into, and setting various defined elements in that page as "contenteditable" to allow text to be entered/changed. My editor UI has a "fullscreen mode" option which allows the editor iframe to take up the entire width/height of the browser...
I've written a bit of code in my keyboard event handler to insert a <br> in response to the press of the Enter key: event.preventDefault(); document.execCommand('InsertHTML', true, '<br>'); This only works if the cursor is between two Letters, if its on the end i need two <br>-Elements. Can i detect if i'm on the end of a Line? Or som...
I'm trying to use contenteditable and styleWithCss. It doesn't seem to work in webkit. Anytime I use do an execCommand, it generates a <b> rather than the span I expected. Here's a demo: http://jsbin.com/izomo/2/edit Select part of the text, click the bold button, and see the html output. Is this a bug or am I doing something wrong....
Not sure if this is possible across all modern browsers, but is there any way, using javascript/jquery to remove all html tags, css formatting, word doc format codes, ect. from a string of text as it is being pasted into an input area of a page (in my case an element set as "contenteditable), so it always goes in as just pure plaintext? ...
Hello all, I use the MooTools Javascript library. And this library give a couple of really useful functions here: http://mootools.net/docs/more/Element/Element.Forms The problem is that this functions only work for 'form' elements like textarea, etc. Now i am making a online editor and for the editor it self i use a div element and th...
I am attempting to create a simple texteditor with HTML5 contenteditable on a div tag. As you know, selected text is handled quite differently in IE. this.retrieveAnchorNode = function() { var anchorNode; if (document.selection) anchorNode = document.selection.createRange().parentElement(); else if (docume...
There's LyX and such editors that attempt to ensure you write text that has a distinct structure. I want same behavior from a html5 contentEditable field except I don't know how. My requirements: No DIV -tags are created. Text is not allowed outside a text container. (paragraphs, headings, pre -blocks and inline -elements) I also ne...
I'm creating a contentEditable div within a table cell to capture user input. The problem is, when I align the text to the right IE8 does not show a text input caret. Every other browser I've tried works. It works if I don't use "text-align: right". It also works if the caret is anywhere other than the far right of the div. Here's some s...
Hey all, I'm currently working to build a CMS for a client where the editing page looks exactly like the rendered page. Hence I don't want an iframe based WYSIWYG, I am looking for something of a wrapper for contenteditable which irons out the differences between Firefox and Webkit. For instance an "Enter key press" in Firefox results ...
Hello, I have problem with this piece of code: var el = $('div#editor'); el.find('*[contentEditable]').removeAttr('contentEditable'); It works great in Chrome 4/5/6, but it doesn't work in FF (3.6.) or Opera (10.60). In FF it throws this exception: Error: uncaught exception: [Exception... "An invalid or illegal string was specified"...
I am looking for a list of WYSIWYG editors that use contentEditable rather than a designMode iframe. The reason I want this is that I want to have a few regions (divs) on my site that users can edit, and I want the styling (fonts, font colors, etc). to look the same in the edit area as it normally does. I don't want to have to apply a s...
I'm having to debug a WYSIWYYG javascript based HTML editor that is failing in IE8. It's only designed for use in IE so that should simplify the solution. Here's the existing code that is failing: function isAllowed() { var sel var obj sel = foo.document.selection if (sel.type != "Control") { ...
I have a div with contenteditable set to true to act as a text input. Now usually, it expands as some text reaches the end of the div, but if I resize the div, this stops happening. The browser no more does this. I tried to set the height after resizing it to auto, but it didn't help either. Please help me on that one. Thanks. ...
I am trying to customize jwysiwyg jquery RTE. I would like to build an image attributes editor so that once an image is inserted into the editable region, the user would select it and then a modal window or properties panel would appear allowing the user to edit the width/height etc. Analogous to gmails image insert UI. The problem is I...