Question

我有一个带渐进增强功能的网页 - 脚本会在页面中添加一些格式和元素。

该页面还允许内联编辑。

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

在同一页面上进行内联编辑和渐进增强功能的干净方法是什么？

Answer 1

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

Answer 2

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

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

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

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

3 个答案: