我如何弄清楚为什么 contenteditable 属性不起作用？答案

【问题标题】：How do I figure out why the contenteditable attribute doesn't work?我如何弄清楚为什么 contenteditable 属性不起作用？
【发布时间】：2010-08-20 20:33:58
【问题描述】：

我的一些 css/javascript 似乎有问题。我似乎无法让 contentEditable 在我的 web 应用程序中工作。 this post 的回答启发了我尝试这种方法。

我已经测试了我的浏览器here，它运行良好。

是否有任何我应该注意的可能导致它不起作用的 css 规则？我可以选择对象（它突出显示 div），但我无法编辑/附加/删除对象中的任何文本。

我还确定了document.designMode = "on"

很遗憾，它是一个内部应用，所以我无法获取链接供所有人试用。

--编辑--
按要求截取代码

<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>

部分 CSS 参数是由 chrome 报告的：

【问题讨论】：

您不需要 designMode 和 contentEditable 属性。你能提供一些代码示例吗？
我认为我不需要两者，但为了它，我试了一下。我已经用代码示例和一些 css 属性更新了主帖。

标签： javascript html contenteditable

【解决方案1】：

不确定哪些样式规则可能会搞砸，但要弄清楚，首先我会尝试在 Firebug 中检查页面，突出显示您的 contenteditable 元素，然后一次关闭该元素的样式规则一个选择器直到它开始工作。

【讨论】：

感谢 RwL 的提示，我试过了（chrome 除外），但无法正常工作。我禁用了几乎所有没有结果的 CSS 东西 =(

【解决方案2】：

我看到您在 contenteidtable div 上使用 jquery UI 类“ui-draggable”。这可能是一个问题，因为默认情况下可拖动的可编辑内容（如 textareas）会静音。如果你让你的 div 可以从 js 中拖动并指定选项，这是可以避免的：

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

这里有更多关于draggable options的详细信息

【讨论】：