插入“占位符”使用 FCKeditor 插件稍后替换为动态内容

Question

我正在为 FCKeditor 编写一个插件，旨在将动态内容的占位符插入 HTML 中。界面如下所示：

目前，该插件插入以下 HTML：

<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar">&nbsp;</div>

我的插件中的 Javascript 片段完成了这些占位符的实际插入是这样的：

function insertNewDiv() {
    var divNode = oEditor.FCK.EditorDocument.createElement('div');
    oEditor.FCK.InsertElement(divNode);
    oEditor.FCK.Focus();
    oEditor.FCK.Events.FireEvent('OnSelectionChange');
    return divNode;
}

为了使其在 FCKeditor 窗口中看起来漂亮，我在 FCKeditor 窗口中应用了一些 CSS，包括以下内容，将标题写在其中：

.dynamicelement:before {
    content: attr(title);
}

无论如何，除了样式之外，FCKeditor 也会处理这些div 元素与其窗口中的任何其他 div 元素没有什么不同。这对我来说不好。

我需要这些占位符具有以下特征：

• 不允许将内容插入占位符。
• 单击它应该将其作为一个整体选择。
• 选择后点击删除键即可将其删除。
• 编辑它的唯一方法（除了删除它）是选择它，然后单击工具栏按钮打开编辑对话框。
• 它应该始终被视为块级元素
• HTML 输出是否使用自定义标记名称并不重要（ 而不是

FCKeditor API 是否提供了一种方法来为其提供命令，例如“按以下方式处理与选择器‘div.dynamicelement’匹配的每个元素：...”？

另外，是否有另一个 FCKeditor 插件可以做类似的事情，我可以参考我在研究中可能忽略的事情？

编辑：顺便说一句，我已经了解 CKeditor。我使用 FCKeditor 有几个原因：它适用于我的 CMS，我使用的配置选项非常适合我的客户（显然，占位符除外），等等。

Answer 1

我通过复制使“分页符”按钮起作用的代码解决了这个问题。

在深入研究源代码时，我了解到 FCKeditor 有一个用于插入占位符的本机方法。

1. 创建一个“假图像”并将其插入编辑器 DOM 中。您可以根据需要设置图像样式。
2. 使用 Javascript 将其连接到相关的 div。
3. 隐藏 div （不过它仍然出现在源代码和输出中）。

在所见即所得模式下，您正在使用这个假图像，并且更改将被转移到 div 中。

插件中需要一些零碎的东西才能完成这项工作。如果您grep查找FCK__PageBreak，您将在源代码中找到它们，准备复制到您的插件中。 FCK__PageBreak 是分页符假图像的类名。

Answer 2

您也许可以使用 ProtectedSource 来获取您想要的内容想：

编辑器提供了一种“保护”部分源代码的方法，使其在编辑或更改视图时保持不变。只需使用配置文件中的“FCKConfig.ProtectedSource.Add”函数即可。

但：

请注意，目前没有任何方法可以“锁定”编辑器中显示的内容。使用 ProtectedSource 保护的内容在编辑过程中实际上是不可见的。例如，它可以用来保护自定义非标准标签或服务器端脚本。默认情况下，FCKeditor 使用它来保护

您也许可以将其与占位符图像一起使用：

• 您的插件添加了“真实”保护标签和占位符。
• 服务器去掉占位符并对真实标签进行操作；但是，如果占位符不存在，但“真实”内容存在，则删除“真实”内容。
• 编辑时，服务器会在将内容发送到浏览器之前插入占位符图像。

所有这些看起来有点复杂，所以你可能会更好地使用一个更简单的组合：

• 插件只是插入一个带有特定类或你选择的假属性的占位符图像。
• 调整图像插件以忽略占位符。
• 将占位符图像替换为服务器上的真实内容。
• 当他们编辑内容时将其发送回浏览器时，将真实内容替换为占位符图像。

或者，您可以使用自己的自定义标记（即 ），然后使用 受保护标签：

在许多情况下，能够切换到 FCKeditor 中的源视图并添加自定义处理所需的一些自定义标记或其他内容非常重要。问题是浏览器不知道如何处理非标准 HTML 标签，并且在找到它们时通常会破坏 DOM 树（特别是 IE）。

结合一些 CSS 来很好地显示 （例如一些尺寸和背景图像）可能会达到目的，而无需太多脏乱差。