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

我有一个带有渐进增强功能的网页——一个脚本为页面添加了一些格式和元素

该页面还允许内联编辑

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

---

怎样才能使内联编辑和渐进增强在同一页面上工作？

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

• 在保存前需要剥离的包装中添加某种类型的分类，例如公共类或隐藏数据属性

• 创建一个黑名单，其中包含保存前应删除的元素的标识符（类名、数据属性）
• 在内联编辑系统中，创建一个清理功能，并在用户每次尝试保存或更新内容时使用该功能过滤内容，然后它将删除增强脚本添加的自动标记
• 您可能需要在服务器端重现“清理”功能，以确保内容确实被正确过滤

---

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

• 在保存前需要剥离的包装中添加某种类型的分类，例如公共类或隐藏数据属性

• 创建一个黑名单，其中包含保存前应删除的元素的标识符（类名、数据属性）
• 在内联编辑系统中，创建一个清理功能，并在用户每次尝试保存或更新内容时使用该功能过滤内容，然后它将删除增强脚本添加的自动标记
• 您可能需要在服务器端重现“清理”功能，以确保内容确实被正确过滤

---

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

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

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

//在连接渐进式增强之前
//在页面加载后，假设这样做
$（'selector-on-what-you-want-to-enhance'）。不是（'contentediate=true'）。每个（函数（）{
//增强
});

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

//在连接渐进式增强之前
//在页面加载后，假设这样做
$（'selector-on-what-you-want-to-enhance'）。不是（'contentediate=true'）。每个（函数（）{
//增强
});

内联编辑是如何实现的？好问题。。。我迫切需要一个SharePoint wiki页面，我不知道他们是如何做到的。我所看到的是，它发生在属性在编辑模式下更改的div中（contenteditable=“true”class=“ms rte layoutsOne internal editable ms rtestate write”role=“textbox”）内联编辑是如何实现的？好问题。。。我迫切需要一个SharePoint wiki页面，我不知道他们是如何做到的。我所看到的是，它发生在属性在编辑模式下更改的div中（contenteditable=“true”class=“ms rte layoutsOne internal editable ms rtestate write”role=“textbox”），这在我的情况下不起作用，因为内联编辑可以在我的渐进增强运行后激活。当你开始内联编辑时，你调用一些JS代码。除上述内容外，您还可以扩展此代码，以从先前渐进式增强添加的可编辑div中删除修改。这在我的情况下不起作用，因为可以在渐进式增强运行后激活内联编辑。当您开始内联编辑时，您调用一些JS代码。除上述内容外，您还可以扩展此代码，以删除先前渐进式增强添加的可编辑div的修改。我无法控制内联编辑系统。但是你的回答帮助我理解了它是如何工作的。谢谢。我无法控制内联编辑系统。但是你的回答帮助我理解了它是如何工作的。谢谢