我正在为 FCKeditor 编写一个插件,用于将动态内容的占位符插入到 HTML 中。界面看起来像这样:
目前,该插件插入以下 HTML:
<div title="Dynamic Element: E-Cards (sidebar)" class="dynamicelement ecards-sidebar"> </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,我使用的配置选项非常适合我的客户(除了占位符之外)等等。
最佳答案
我通过复制使“分页符”按钮起作用的代码解决了这个问题。
在浏览源代码时,我了解到 FCKeditor 有一个用于插入占位符的本地方法。
- 创建一个“假图像”并将其插入到编辑器 DOM 中。您可以根据需要设置图像样式。
- 使用 Javascript,将其连接到有问题的
div
。 - 隐藏
div
(尽管它仍然出现在源代码和输出中)。
在 WYSIWYG 模式下,您正在玩这个假图像,并且更改被转移到 div
。
插件中需要一些点点滴滴才能使这项工作正常进行。如果您为 FCK__PageBreak
grep
,您会在源代码中找到它们,准备将它们复制到您的插件中。 FCK__PageBreak
是分页假图片的类名。
关于javascript - 使用 FCKeditor 插件插入 "placeholders",稍后用动态内容替换,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5131665/