javascript - CKEditor:分页显示指示器

Question

我们确实在旨在生成演示 Material 的 SaaS 系统中使用 CKEditor(想想 Powerpoint，但基本上是在 Web 上)。我们实际上使用 CKEditor 制作“幻灯片”。

在我们的特定情况下，幻灯片具有确定的高度。高度不会是动态的，我们事先知道在 CKEditor 中输入的文章需要达到多高(以像素为单位)才能在演示文稿中被 chop 。

问题:我们想要一种实时显示，比如红线或类似的东西，显示页面何时会中断；这样输入 CKEditor 的用户就会感觉到中断何时会到来(我不是在谈论手动将中断放在那里，只是显示中断何时自然发生)。

我们应该如何解决 CKEditor 的问题？

Answer 1

假设您的幻灯片高度必须为 500 像素。创建一个空的透明 PNG 图像，宽度为 1px，高度为 500px。将最后 2-3 个像素设为红色。这将指示分页符。然后，在您的 CKEditor 文件夹中找到 contents.css 并修改 .cke_editable 部分以包含 background-image: url('page_break_indicator.png'); 将图像添加为水平和垂直重复的背景。但请注意，如果用户创建了 3 张或更多幻灯片，然后修改了一张不是最后一张的幻灯片，则必须根据分页符检查其之后的所有其他幻灯片。