Question

我有这是我的配置文件：

CKEDITOR.stylesSet.add( 'custom_styles', [
    { name: 'Paragraph', element: 'p' },
    { name: 'Heading 3', element: 'h3' },
    { name: 'Heading 4', element: 'h4' },
    { name: 'Marker: Yellow', element: 'span', styles: { 'background-color': 'Yellow' } },
    { name: 'Custom Image', element: 'img', attributes: { 'class': 'myClass' } }
]);

但是在下拉菜单中只显示前5个，即使我点击图片也是如此。我已经在最近的Chrome和Firefox中尝试了它并且配置没有被缓存（我添加了黄色样式来检查它并且它工作正常）。当我点击图像时，底栏显示“body p image”，但下拉列表中的默认值显示为“paragraph”。我也试过改变样式的顺序。

文档似乎很简单，所以我不确定我做错了什么。是否有一些技巧可以让对象样式显示出来？

编辑：其他选定的零件似乎也有些奇怪。我有Image2插件，当我添加一个链接到图像然后点击该图像，底部栏只显示“正文p图像”，并没有提到“a”，即使它在HTML中。

Answer 1

ckeditor中的图像现在使用小部件系统。我不确定为什么还没有真正记录，但解决方案是指定：

type：widget
widget：image

所以以下内容应该有效：

{ name: 'Custom Image', type: 'widget', widget: 'image', attributes: { 'class': 'myClass' } }

Answer 2

不是100％确定你在哪里模糊，但如果你问为什么该选项并不总是在 styles 下拉菜单中：这是因为行为是上下文敏感取决于插入符号的位置和/或当前选择的内容。选择图像允许您通过此菜单追溯应用样式，但不插入新图像 - 因此您需要添加自己的控件。

只要向对象添加类，只要 CKEDITOR 知道样式表，你所拥有的就应该有效。由于编辑器的内容窗格使用<iframe>元素，因此需要将样式表添加到其各自的文档中。这可以通过全局配置（docs）完成：

CKEDITOR.config.contentsCss = '/path/custom.css';

...或自版本4.4（docs）以来的单个编辑器实例：

CKEDITOR.instances['myEditorId'].addContentsCss( '/path/custom.css' );

用于img的ckeditor自定义样式不会显示在下拉列表中

2 个答案: