javascript - 插入带有FCKeditor插件的“占位符”，稍后将其替换为动态内容

我正在为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元素没有区别。这对我不好。

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


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


FCKeditor API是否提供一种向其发出命令的方式，例如“以下列方式处理与选择器'div.dynamicelement'匹配的每个元素：...”？

另外，还有另一个FCKeditor插件可以执行我在研究中可能忽略的类似功能吗？

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

最佳答案

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

在查看源代码时，我了解到FCKeditor具有用于插入占位符的本机方法。


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


在“所见即所得”模式下，您正在使用此伪造的图像，并且所做的更改将传递到div。

要使这项工作有效，插件中需要包含一些细节。如果您将grep替换为FCK__PageBreak，则将在源代码中找到它们，准备将其复制到插件中。 FCK__PageBreak是分页符伪造图像的类名。

关于javascript - 插入带有FCKeditor插件的“占位符”，稍后将其替换为动态内容，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5131665/