2017-09-24 126 views
0

我使用gem 'ckeditor', github: 'galetahub/ckeditor'与rails admin。 我想要当我发布在主页上的文章,与文章的描述相关的图像应该是自动响应。我在如何使ckeditor图像响应导轨

资产/使用Javascript/CKEditor的

一个文件夹,我在此文件夹中粘贴此piece of code,但似乎不工作too.please帮助我。在此先感谢

回答

0

如果你想在CKEditor中插入图像作出响应,你可以使用下面的代码。它为 图像标记创建htmlfilter,它用 替换内联“宽度”和“样式”定义的相应属性和添加(在本示例中) Bootstrap“img-responsive”类

我相信CKEDITOR不会将img-responsive类添加到这些图像。你可以通过添加一个图片CKEDITOR来检查,然后检查页面上的html是否添加了img-responsive类。

功能CKEDITOR.on()事件'instanceReady'将执行代码的'img-responsive'类添加到图像元素el

事实是,我认为你应该把一个断点代码和测试中,如果实际执行

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

因为this are the instruction on how to adapt ckeditor with turbolinks

创建文件app /资产/ JA vascripts/init_ckeditor.coffee

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

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

确保文件是从您的应用程序/资产/ JavaScript的加载/ application.js中

CKEDITOR is the API entry point. The entire CKEditor code runs under this object.

The documentation of the .on() jquery method可以帮助你更好地理解为什么这个调用没有执行,基本上.on()方法在触发该事件时触发function(){}中的js代码。

事件是instanceReady这是info from the API

instanceReady(EVT) 触发的事件创建CKEDITOR实例时,完全初始化并准备互动。

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