Sharepoint 富内容编辑器修改从自定义工具栏按钮添加的 HTML

Question

摘要：我想问的是 - 我们是否以完全错误的方式处理这个问题，或者是否有办法阻止 Sharepoint 或其丰富的编辑器修改添加的 HTML？

我被“扔”进了一个围绕 Sharepoint 2007 的项目（相信我，我对此并不完全满意），所追求的事情之一就是使用丰富内容区域来实现用户输入“丰富内容”，然后向内容添加某些“附加内容”，例如可扩展内容区域、对话框等。

最初的攻击计划是向 Sharepoint 丰富内容编辑器工具栏添加一个自定义按钮，我们将其有代码可以做到这一点，并且它可以工作等等，并将 javascript 事件处理程序附加到某些元素 - 这也可以工作 - 到一个点。

我们正在做的一件事是使用 元素和后续的

来设置对话框（使用 jQuery UI 来实现魔法）。当用户单击“插入对话框”按钮时，以下内容将插入到编辑器中：

<a href="#" class="dialog-trigger">Click me to open the dialog</a>
<div class="dialog-content">
    this is some dialog content etc
</div>

当页面加载时，我们挂钩 .dialog-trigger click 方法，获取 a 元素的同级元素，即 >.dialog-content 并将其设置为对话框。只要您不想编辑任何内容，此操作就“有效”。

我发现，一旦您开始编辑 .dialog-content DIV 中的内容，丰富内容编辑器就会开始修改 HTML，例如，添加列表会添加以下 HTML：

<li><div class=dialog-content>Some list item</div></li>
<li><div class=dialog-content>Some list item 2</div></li>
<li><div class=dialog-content>Another list item</div></li>

正如您可以想象的那样，这破坏了我们正在尝试做的事情。

总结一下我想问的问题 - 我们是否以完全错误的方式解决这个问题，或者是否有办法阻止 Sharepoint 或其丰富的编辑器修改添加的 HTML？

Answer 1

如果您只是将 HTML 按原样放入编辑器内容中，您将无法阻止编辑器弄乱您的 HTML。如果您有一些必须保持完整的内容，那么您需要将其存储在其他地方，并在编辑器中为它提供一个占位符，其中包含实际内容的 ID（例如，在 中带有 ID 的占位符图像） alt 属性）。当编辑器保存时，您需要将这些占位符替换为真实的 HTML 内容，反之亦然。

Answer 2

我理解您的痛苦，与其他开源解决方案相比，SharePoint 的富文本编辑器并不是最好的。无论如何，也许您可​​以训练您的用户使用预定义的样式？然后使用 JQuery 来做事。

如果您在 CSS 中执行以下操作，

/*.ms-rteCustom-anything else you want*/
/*e.g.*/
.ms-rteCustom-DialogTrigger {
    color:#333333
}

现在共享点编辑器将在样式下显示“DialogTrigger”并将其应用为 div。

或者，从技术上讲，您可以使用另一个编辑器，并使用 SPAPI 或 JQuery + SharePoint Web 服务。