1

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 select the object (it highlights the div) but I can't edit/append/delete any text in the object.

I have also made sure that document.designMode = "on"

Unfortunately it's an internal app so I can't get links for everyone to try.

--EDIT--
Code Snipped as requested

<div id="textarea_textObject0_preview_container" class="te_preview" style="width: 650px; height: 365px; overflow-x: hidden; overflow-y: hidden; text-align: left; background-image: url(http://172.18.4.249/workspace/tc-a/web/style/images/bgrid.jpg); ">
<div style="display: inline-block; position: relative; cursor: move; font-weight: normal; font-style: normal; text-decoration: none; left: 170px; top: 129px; " class="ui-draggable" contenteditable="true">Start Text</div>
</div>


Some of the CSS parameters are reported by chrome: alt text

Community
  • 1
  • 1
rnavarro
  • 173
  • 1
  • 4
  • 12
  • You don't need both designMode AND contentEditable attributes. Can you provide some code sample? – Gary Aug 20 '10 at 20:42
  • I didn't think I needed both, but for the heck of it I tried it. I've updated the main post with a code sample and some of the css attributes. – rnavarro Aug 20 '10 at 20:56

2 Answers2

0

Not sure offhand what style rules might screw things up, but to figure it out, first I'd try to inspect the page in Firebug, highlight your contenteditable element, then turn off styles rules for that element one selector at a time until it starts to work.

RwwL
  • 3,298
  • 1
  • 23
  • 24
  • Thanks for the tip RwL, I tried just that (except in chrome) and I couldn't get anything to work properly. I disabled pretty much all the CSS stuff with no results =( – rnavarro Aug 20 '10 at 20:57
0

I see you are using the jquery UI class "ui-draggable" on your contenteidtable div. This may be a problem as draggable silences editable content like textareas by default. It can be avoided if you make your div draggable from js and specify options:

$('div').draggable({
    cancel: 'div'
}

Here's more details on draggable options

Community
  • 1
  • 1
AAryz
  • 140
  • 7