javascript - 使用 FCKeditor 插件插入 "placeholders"，稍后用动态内容替换

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

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

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

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

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

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

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

编辑:顺便说一句，我已经知道 CKeditor。我使用 FCKeditor 有几个原因:它适用于我的 CMS，我使用的配置选项非常适合我的客户(除了占位符之外)等等。

Answer 1

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

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

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

在 WYSIWYG 模式下，您正在玩​​这个假图像，并且更改被转移到 div。

插件中需要一些点点滴滴才能使这项工作正常进行。如果您为 FCK__PageBreak grep，您会在源代码中找到它们，准备将它们复制到您的插件中。 FCK__PageBreak 是分页假图片的类名。