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

问题

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:

回答1:

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.

回答2:

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

来源：https://stackoverflow.com/questions/3534692/how-do-i-figure-out-why-the-contenteditable-attribute-doesnt-work

标签

javascript

html5

contenteditable