样式：图像在编辑器中浮动

Question

我需要能够在 ckeditor 中向右或向左浮动图像，如本例所示：

我已经下载了插件并将以下代码添加到我的 ckeditor-replace 中：

extraPlugins: 'image2',
          removePlugins: 'loremipsum, texttransform, liveedit',
    image2_alignClasses: [ 'image-left', 'image-center', 'image-right' ],
    image2_captionedClass: 'image-captioned'...

然后，在我的 css 文件中，我将 classes 浮动到它们各自的值：左、右（当我选择将图像向右浮动时，在源下方，我看到它被赋予 class 右图）。到目前为止一切顺利，但正如我所说，需要在 ckeditor 中进行更改。用户需要查看他的文档的外观。

我需要在样式中的什么地方或什么地方更改 ckeditor 中的行为？我检查了样式文档，但我仍然不清楚如何操作 classes（如果这是我需要做的）。

例如，这个：

var style = new CKEDITOR.style( { element: 'img', attributes: { 'class': 'foo' } } );

我想我需要定位 class 图像右侧并给它一个浮动，对吧。

建议？

Answer 1

如 documentation of the Captioned Image feature 中所述，您需要在样式表中为这些类定义 CSS 规则。设置此配置选项后，必须向编辑器提供相应的样式定义：

对于classic editor，可以通过在编辑器加载的样式表中定义额外的样式来完成。必须在将加载内容的目标页面上提供相同的样式。
对于 inline editor，可以直接使用 <style> ... <style> 或 <link href="..." rel="stylesheet"> 定义样式，即在页面的 <head> 部分中。

至于为编辑器内容定义样式表，请使用 config.contentsCss 配置选项，例如：

config.contentsCss = [ '/css/mysitestyles.css', '/css/mywidgetstyles.css' ];

请参阅以下 showcase 通过类完成的字幕图像样式和对齐。

样式：图像在编辑器中浮动

Style: Image float right in the editor

styles

ckeditor