How to make CKEditor image responsive in rails - javascript

I m using gem 'ckeditor', github: 'galetahub/ckeditor' with rails admin.
I want when I post article on the homepage, images associated with article's description should be automatic responsive. I have one folder in
assets/Javascript/ckeditor
, and I posted this piece of code in this folder, but it seems not working too. please help me out. thanks in advance.

If you want inserted images in a CKEditor to be responsive you can use the following code. It creates a htmlfilter for the
image tag that replaces inline "width" and "style" definitions with
their corresponding attributes and add's (in this example) the
Bootstrap "img-responsive" class.
I believe CKEDITOR does not add the img-responsive class to those images. You can check this by adding an image with CKEDITOR and then check if the html on the page has the img-responsive class added.
The function CKEDITOR.on() the event 'instanceReady' will execute the code to add the 'img-responsive' class to the image element el
The fact is, I believe you should put a breakpoint inside that code and test if it is actually executing
CKEDITOR.on('instanceReady', function (ev) { // etc.. etc.. });
because this are the instruction on how to adapt ckeditor with turbolinks
Create a file app/assets/javascripts/init_ckeditor.coffee
var ready = function() {
CKEDITOR.on('instanceReady', function (ev) { // code });
}
$(document).ready(ready)
$(document).on('page:load', ready)
Make sure the file is loaded from your app/assets/javascripts/application.js
CKEDITOR is the API entry point. The entire CKEditor code runs under this object.
The documentation of the .on() jquery method can help you understand better why that call is not executing, basically the .on() method trigger the js code in the function(){}, when that event is triggered.
The event is instanceReady and this is the info from the API
instanceReady( evt )
Event fired when a CKEDITOR instance is created, fully initialized and ready for interaction.
Parameters
evt : CKEDITOR.eventInfo
editor : CKEDITOR.editor
The editor instance that has been created.

Method 1
Add this in your CSS file:
img {
max-width: 100%;
height: auto !important;
}
Method 2
Use Enhanced Image plugin to replace the default image widget.
Method 3
Use the snippet in your link, but remember to replace the img-responsvie to img-fluid if you use Bootstrap 4.

Related

Running CKEditor in Fancy Box: Editor popups/overlays focus behind fancybox overlay

I am using fancy box to open various edit functions in an in line div. I use ajax to get the div contents, move it into the div, and open the div in Fancybox. Mostly works great. Some edit blocks have the ckeditor in them and that loads fine and mostly works... but the ckeditor popup/overlays (like paste from word, the color selectors or image tools) are opening underneath the fancybox window. Maybe a z-index issue, but not sure how to fix it:
Fancy box code is below:
function openEditBlock() {
$.fancybox.open({
src : '#editBlock',
type : 'inline',
touch: false
});
}
CK Editor Code below:
var editor1 = CKEDITOR.replace('editor1_content',
{
extraPlugins: 'stylesheetparser', // load the plugin
contentsCss: '../css/editor_cmsPages.css', // load custom stylesheet
stylesSet: [], // Do not load the default Styles configuration.
height: '480px',
width: '780px',
});
CKFinder.setupCKEditor(editor1, 'wysfind/' ) ;
fancybox elements have z-index values from 99992 to 99995; but 1) ckeditor places dialog elements outside the content, as last children of <body> and 2) uses quite low starting values for z-index, for example, color selector has 10006 by default.
Luckily, ckeditor allows to configure z-indexes, locate config.js file and change value of baseFloatZIndex to smth like 100001 (see https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-baseFloatZIndex)

Call JavaScript for custom added class for Wordpress WPBakery Visual Composer Post Grid?

I added a class (format-date) to a custom field in Post Grid but I can't seem to apply any JS to it.
<div class="vc_gitem-post-meta-field-_EventStartDate format-date vc_gitem-align-left"> 2015-10-08 07:30:00</div>
Simple jQuery test:
$('.format-date').addClass('test')
Code is in the footer and I've tried $(window).load(function() $(document).ready(function(). No JS errors in Fire Bug.
I suspect it's due to the loading animation applied to the posts. How can I call my JS after this has loaded?
This worked:
$(document).ajaxStop(function() {
// your code here
});

understanding Plugin destroy function

hey guys i am very new to js and jquery in genenral and i was just going throught the plugin code of a gallery plugin , i can across the function called _loadevents , that had the following content , see below :
this.$navPrev.on('click.gallery', function (event) {
});
this.$navNext.on('click.gallery', function (event) {
});
this.$wrapper.on('webkitTransitionEnd.gallery transitionend.gallery OTransitionEnd.gallery', function (event) {
});
now $navPrev , $navNext , and $wrapper are obviously some HTML element , now my question is about another method i came across in the same plugin , look below :
destroy: function () {
// console.log('inside destroy');
this.$navPrev.off('.gallery');
this.$navNext.off('.gallery');
this.$wrapper.off('.gallery');
}
now i see that if this function is called all the event handlers will be taken off. now , can somebody tell me what is the necessacity of such a function , does it improve a plugins efficiency ? how or when does such a function get used and is it a common practice to write e destroy function for events in plugins ?
Thank you.
Alex-z .
Destroy functions in plugins enable a developer to reset or remove a plugin from an element, restoring the element to before the plugin was initialised. This is useful if, for example, you have a gallery plugin that works and looks fantastic on desktop, but you don't want it on mobile. You can listen to resize event on window and if the window size is smaller than e.g. 710px then destroy the plugin. This will remove all the added events, undo any DOM manipulation, and restore the html elements back to how they were before the plugin was first initialised (turn-wise, if the window size is larger than 710px then initialise the plugin).
They are generally considered good practice.

load images dynamically into jquery iviewer

Anyone ever loaded images dynamically into jquery iViewer? Currently, it's setup as
$(document).ready(function(){
$("#images").iviewer(
{
src: "images/voices/big/page01.jpg",
update_on_resize: false,
initCallback: function (object)
{
$("#in").click(function(){ object.zoom(1);});
$("#out").click(function(){ object.zoom(-1);});
$("#fit").click(function(){ object.fit();});
$("#orig").click(function(){ object.toOrig();});
$("#update").click(function(){ object.update();});
}
});
});
so you have to put different instances on the page in order to show more than one image. Currently i have the "scrollable" plugin for thumbnails and i wanted to be able to dynamically load their large images into iViewer plugin. Anyone got any ideas?
Current example here: http://orangepxl.com/yasuko/voices.php only 1 image will work... :(
Please, take the last version of the plugin from the github. Iviewer is now a jQuery UI widget and it has loadImage method, so you can show different images in a single widget.
You could load new image with code like this:
jQuery('.iviewer_selector').iviewer('loadImage', 'http://url.to/image.png');
See https://github.com/can3p/iviewer for examples.
You can load All of them and, can hide them using jquery, and show them according to the click event for Thumbnails.
Do the iViewer for all of the images and hide them using jquery or just css,
and when clicking on the thumbnails, show only the corresponding image, and hide rest

ExtJS: starting HtmlEditor defaulting to source

I'm using ExtJS 3.2.1 and I need a component almost identical to the bundled HtmlEditor, with one exception: it must start editing the HTML source code directly. The reason I don't use a normal TextArea is that the user should be able to preview the result of his actions before submitting.
I've tried calling toggleSourceEdit(), as per ExtJS documentation, with no success. Debugging, I see that the editor object has the sourceEditMode property set to true, and the Source Edit button seems as if it was "pressed", but clicking on it does not render the typed HTML, and clicking it again goes to the Source Mode.
I've tried calling toggleSourceEdit() after the container show() method, on the container afterLayout listener and on the editor afterRender listener. I've tried also calling it on another button that I added to the container. The result is the same on every try.
The only other option I see is updating ExtJS to 3.3.0, but I haven't seem anything related on the changelogs. Either way, it's going to be my next step. EDIT: The app had another problems when updating, we'll make a bigger effort to update later. As of right now, we are using the HtmlEditor in its original setting.
Thanks!
ran into the same problem (using 3.3.0 by the way)
stumbled upon a fix by dumb luck. i have no idea why this works, but second time is the charm. call it twice in a row to achieve the desired effect..
HTMLEditor.toggleSourceEdit(true);
HTMLEditor.toggleSourceEdit(true);
hope that helps!
Rather calling toggleSourceEdit(), try to setup the configuration while you create HtmlEditor Object
Using toggleSourceEdit() caused some problems for me. One was that this seemed to put the editor somewhere in limbo between source edit and WYSIWYG mode unless I used a timeout of 250ms or so. It also puts the focus in that editor, and I don't want to start the form's focus in the editor, especially since it's below the fold and the browser scrolls to the focused html editor when it opens.
The only thing that worked for me was to extend Ext.form.HtmlEditor and then overwrite toggleSourceEdit, removing the focus command. Then adding a listener for toggling to the source editor when the component is initialized. This is for Ext 4.1 and up. For older versions, replace me.updateLayout() with me.doComponentLayout().
var Namespace = {
SourceEditor: Ext.define('Namespace.SourceEditor', {
extend: 'Ext.form.HtmlEditor',
alias: 'widget.sourceeditor',
initComponent: function() {
this.callParent(arguments);
},
toggleSourceEdit: function (sourceEditMode) {
var me = this,
iframe = me.iframeEl,
textarea = me.textareaEl,
hiddenCls = Ext.baseCSSPrefix + 'hidden',
btn = me.getToolbar().getComponent('sourceedit');
if (!Ext.isBoolean(sourceEditMode)) {
sourceEditMode = !me.sourceEditMode;
}
me.sourceEditMode = sourceEditMode;
if (btn.pressed !== sourceEditMode) {
btn.toggle(sourceEditMode);
}
if (sourceEditMode) {
me.disableItems(true);
me.syncValue();
iframe.addCls(hiddenCls);
textarea.removeCls(hiddenCls);
textarea.dom.removeAttribute('tabindex');
//textarea.focus();
me.inputEl = textarea;
} else {
if (me.initialized) {
me.disableItems(me.readOnly);
}
me.pushValue();
iframe.removeCls(hiddenCls);
textarea.addCls(hiddenCls);
textarea.dom.setAttribute('tabindex', -1);
me.deferFocus();
me.inputEl = iframe;
}
me.fireEvent('editmodechange', me, sourceEditMode);
me.updateLayout();
}
})
}
Then to use it:
Ext.create('Namespace.SourceEditor', {
/*regular options*/
listeners: {
initialize: function(thisEditor) {
thisEditor.toggleSourceEdit();
}
}
});
htmlEditor.toggleSourceEdit(true);
one time should be enough if you do this listening to the afterrender event of the editor.

Categories

Resources