Question

我需要能够在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文件中，我将类浮动到它们各自的值：左，右（当我选择将图像向右浮动，在源下，我看到它被赋予类图像权限）。到目前为止一切顺利，但就像我说的那样，更改需要在ckeditor中进行。用户需要查看他的文档的样子。

在样式中，我需要更改ckeditor中的行为？我查看了样式文档，但我仍然不清楚我是如何操作类的（如果这就是我需要做的事情）。

例如，这个：

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

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

建议？

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

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

1 个答案: