Question

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

Interface

目前，该插件会插入以下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窗口中看起来不错，我将一些CSS应用到FCKeditor窗口，包括以下内容，将标题写入其中：

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

无论如何，除了样式之外，FCKeditor对这些div元素的处理方式与其窗口中的任何其他div元素没有区别。这对我不好。

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

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

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

另外，是否有另一个FCKeditor插件执行类似我可以参考的内容，我可能在我的研究中忽略了它？

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

Answer 1

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

在浏览源代码时，我了解到FCKeditor有一个插入占位符的本机方法。

创建“假图像”并将其插入编辑器DOM中。您可以根据需要设置图像样式。
使用Javascript，将其连接到相关的div。
隐藏div（它仍显示在源和输出中）。

在WYSIWYG模式下，您正在使用此假图像，并且更改将被转移到div。

插件中需要有一些零碎的东西才能完成这项工作。如果grep为FCK__PageBreak，您会在源代码中找到它们，随时可以将其复制到您的插件中。 FCK__PageBreak是分页符伪造图像的类名。

Answer 2

您可以使用ProtectedSource来获得所需内容：

编辑器提供了一种“保护”部分源的方法，以便在编辑或更改视图时保持不变。只需在配置文件中使用“FCKConfig.ProtectedSource.Add”功能。

可是：

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

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

您的插件会添加“真实”保护标记和占位符。
服务器剥离占位符并对真实标记执行操作;但是，如果占位符不在那里，但“真实”的东西就是删除“真实”的东西。
编辑时，服务器会在将内容发送到浏览器之前插入占位符图像。

所有这些看起来有点复杂，所以你可能会用更简单的kludge更好：

插件只会插入一个占位符图片，其中包含您选择的特定class或假属性。
调整图片插件以忽略占位符。
将占位符图像替换为服务器上的实际内容。
在编辑内容时，将真实内容替换为占位符图像，将其替换为浏览器。

或者，您可以使用自己的自定义标记（即<dynamicelement>），然后使用ProtectedTags:

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

结合一些CSS可以很好地显示<dynamicelement>（比如一些尺寸和一个背景图像），可以在没有太多脏污的情况下做到这一点。

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

2 个答案: