内联编辑和渐进增强之间的冲突答案

【问题标题】：Conflict between inline editing and progressive enhancement内联编辑和渐进增强之间的冲突
【发布时间】：2011-11-18 03:35:04
【问题描述】：

我有一个渐进增强的网页 - 一个脚本向页面添加了一些格式和元素。

该页面还允许内联编辑。

现在我的问题是：在编辑模式下，渐进增强脚本会完成它的工作并添加标记。一些标记位于可以编辑的区域，因此当用户保存页面时它会被保存，这当然不是想要的行为。

在同一页面上进行内联编辑和渐进增强工作的简洁方法是什么？

【问题讨论】：

内联编辑是如何实现的？
嗯，好问题...我的迫切需要是 SharePoint wiki 页面，但我不知道他们是如何做到的。我所看到的只是它发生在属性在编辑模式下更改的 div 中（contenteditable="true" class="ms-rte-layoutszone-inner-editable ms-rtestate-write" role="textbox"）

标签： javascript progressive-enhancement inline-editing

【解决方案1】：

当开始内联编辑时，您可以将内容可编辑的 div 的 id 设置为特定值，并修改渐进增强脚本中的选择器不选择此 div。（如果你有多个可编辑的 div，那么你可以设置它们的类名。）

【讨论】：

这在我的情况下不起作用，因为在我的渐进增强运行后可以激活内联编辑。
当你开始内联编辑时，你调用了一些 JS 代码。除了上述内容之外，您还可以扩展此代码以从以前的渐进增强添加的可编辑 div 中删除修改。

【解决方案2】：

您说您的渐进增强脚本添加标记以突出显示重要内容 sn-ps 但您不想保存自动添加的标记。这是一个干净有效的解决方案：

将某种分类法添加到您需要在任何保存之前剥离的包装器中，例如公共类或隐藏数据属性<span class="inline-highlighted-element"></span>。
创建一个黑名单，其中包含在保存之前应消除的元素的标识符（类名、数据属性）。
在您的内联编辑系统中，创建一个清理功能，并在用户每次尝试保存或更新内容时使用该黑名单过滤内容，然后它将删除您的增强脚本的自动标记已添加。
您可能需要在服务器端重现清理功能，以确保内容确实会被正确过滤。

【讨论】：

我无法控制内联编辑系统。但是您的回答帮助我了解了它的工作原理。谢谢。

【解决方案3】：

我是 jQuery 狂热者，所以我用 jQuery 回答。

<script>
    // before attaching your progressive enhancement
    // do this assuming this after your page loads
    $('selector-on-what-you-want-to-enhance').not('[contenteditable=true]').each(function(){
    // enhance away
    });
</script>

【讨论】：