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

【问题标题】：Style: Image float right in the editor样式：图像在编辑器中浮动
【发布时间】：2016-02-16 12:15:39
【问题描述】：

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

http://ckeditor.com/demo#widgets（参见增强图像）

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

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

然后，在我的 css 文件中，我将类浮动到它们各自的值：左、右（当我选择将图像向右浮动时，在源代码下，我看到它被赋予了类 image-right ）。到目前为止一切顺利，但就像我说的那样，需要在 ckeditor 中进行更改。用户需要查看其文档的外观。

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

例如，这个：

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

我想我需要定位类 image-right 并给它一个浮点数，对吧。

建议？

【问题讨论】：

查看What's New in Widgets in CKEditor 4.4? 演示，该演示展示了如何使用类来对齐带字幕的图像小部件。文档可在此处获得：docs.ckeditor.com/#!/guide/…
感谢您将我带到正确的地方。神奇的代码是这样的： contentsCss: [ CKEDITOR.getUrl( 'contents.css' ), // 为小部件样式添加 CSS。 'assets/widgetStyles.css' ]，--我在 js 选项卡下找到的。有点晦涩难懂。你们做得很好......但某些事情可以更清楚。如果你给出这个答案，我会接受。

标签： ckeditor styles

【解决方案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 的标题图像样式和通过类完成的对齐。

【讨论】：