如何使CKEditor图像在Rails中响应

Question

我正在使用带有rails admin 'ckeditor', github: 'galetahub/ckeditor' 。 我想在首页上发布文章时，与文章描述相关的图像应该是自动响应的。 我有一个文件夹

资产/ Javascript / ckeditor

，并且我将这段代码发布到了此文件夹中，但似乎也无法正常工作。 请帮帮我。 提前致谢。

Answer 1

如果要使插入到CKEditor中的图像响应，可以使用以下代码。 它为image标签创建一个htmlfilter，将其内联的“ width”和“ style”定义替换为其相应的属性，并添加Bootstrap“ img-sensitive”类 （在此示例中）。

我相信CKEDITOR不会将img-responsive类添加到这些图像中。 您可以通过使用CKEDITOR添加图像来检查此内容，然后检查页面上的html是否添加了img-responsive类。

函数CKEDITOR.on()和事件'instanceReady'将执行代码，以将'img-responsive'类添加到图像元素el

事实是，我相信您应该在该代码中放置一个断点并测试其是否真正在执行

CKEDITOR.on('instanceReady', function (ev) { // etc.. etc.. });

创建一个文件app / assets / javascripts / init_ckeditor.coffee

var ready = function() {
    CKEDITOR.on('instanceReady', function (ev) { // code });
}

$(document).ready(ready)
$(document).on('page:load', ready)

确保从您的app / assets / javascripts / application.js加载了文件

.on() jquery方法的文档可以帮助您更好地理解为什么该调用未执行的原因，基本上是.on()方法在触发该事件时触发function(){}的js代码。

该事件是instanceReady ，这是来自API的信息

instanceReady（evt）创建CKEDITOR实例，将其完全初始化并准备进行交互时将触发事件。

Parameters
evt : CKEDITOR.eventInfo
editor : CKEDITOR.editor
The editor instance that has been created.

Answer 2

方法1

将此添加到您的CSS文件中：

img {
    max-width: 100%;
    height: auto !important;
}

使用增强型图像插件来替换默认的图像小部件。

使用链接中的代码段，但如果使用Bootstrap 4，请记住将img-responsvie替换为img-fluid 。