我有一个渐进式增强的网页-一个脚本添加一些格式和元素到页面。
该页面还允许内联编辑。
现在我的问题是:在编辑模式下,渐进式增强脚本完成它的工作并添加标记。有些标记位于可编辑的区域,因此在用户保存页面时将其保存,这当然不是想要的行为。
将是一个干净的方式,使内联编辑和渐进式增强工作在同一个页面上?
当开始内联编辑时,您可以将可内容的div的id设置为特定值,并修改渐进增强脚本中的选择器以不选择该div(如果您有多个可编辑的div,那么您可以设置它们的类名)
您说您的渐进式增强脚本添加标记以突出显示重要的内容片段,但您不想保存自动添加的标记。下面是一个简洁高效的解决方案:
- 添加某种分类法到您需要在任何保存之前剥离的包装器,如公共类或隐藏数据属性
<span class="inline-highlighted-element"></span>
。 - 创建一个黑名单,其中包含保存前应该消除的元素的标识符(类名,数据属性)。
- 在你的内联编辑系统中,创建一个清理函数,并使用黑名单在每次用户试图保存或更新内容时过滤内容,然后它将删除你的增强脚本添加的自动标记。
- 可能您需要在服务器端上重新生成消毒功能,以确保内容确实将被正确过滤。
我是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>