How to hide toolbar in CKEditor inline - ckeditor

I have an application that needs the inline CKEditor but without toolbar. For the inline CKEditor part I have:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {on: {
instanceReady: function() {periodic();}
}});
var periodic = (function() {
var data, oldData;
return function() {
if ((data = editor.getData()) !== oldData) {
oldData = data;
$.post("update.php", {txt:data});
}
setTimeout(periodic, 1000);
};
})();
Then for the toolbar hiding part I found this: CKEditor 4 Inline: How to hide toolbar on demand?
//Whenever CKEditor loses focus, We will hide the corresponding toolbar DIV.
function hideToolBarDiv(event) {
// Select the correct toolbar DIV and hide it.
//'event.editor.name' returns the name of the DIV receiving focus.
$('#'+event.editor.name+'TBdiv').hide();
}
Problem is that I have no clue how to combine these two together :) I appreciate for any hint. Thank you.

I found another link that seems to solve my problem: Can I use CKEditor without a toolbar?
The script seems to be working alright though I am still not sure if it is a correct way to do it:
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline('editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height]'
on: {instanceReady: function() {periodic();}}
});
var periodic = (function() {
var data, oldData;
return function() {
if ((data = editor.getData()) !== oldData) {
oldData = data;
$.post("update.php", {txt:data});
}
setTimeout(periodic, 1000);
};
})();

In my eyes, I have done it in two ways:
1) Using the removePlugins option and just remove the toolbar:
CKEDITOR.inline( 'textarea', {
removePlugins: 'toolbar'
} );
here, you can also use allowedContent to allow the contents for ACF
CKEDITOR.inline( 'editable', {
removePlugins: 'toolbar',
allowedContent: 'p h1 h2 strong em; a[!href]; img[!src,width,height];'
} );
2) Using CSS - Not the standard approach: (little tricky)
Just make css to display:none the toolbar, like
.cke_inner {
display: none;
}
Hope it will help someone.

Related

How to disable the edit mode in CKEditor 4? (inline-editor)

I need disable edit mode in inline mode.
I try use this code
CKEDITOR.disableAutoInline = false;
var editor = CKEDITOR.inline(elm[0], {
extraAllowedContent: '*',
toolbarStartupExpanded : false,
toolbarCanCollapse : false,
startupFocus: false,
});
editor.on('instanceReady', function (ev) {
var ed = ev.editor;
ed.setReadOnly(true);
editor.removeListener();
});
editor.on('focus', function (event) {
return false;
});
editor.on('blur', function () {
return false;
});
This code hide toolbar, but menu (right mouse click) is enable, and I need full disable (readonly mode) only for 'render content' but I need all plugins, including "code" and quote. (if i use render with "removePlugin "toolbar", my plugins code, quote and etc not render my code correct) any ideas?
Just add:
config.readOnly = true;
Ref: https://ckeditor.com/docs/ckeditor4/latest/guide/dev_readonly.html

lazy load doesnt work with hidden elements

this is my simple test code for lazy load
http://codepen.io/kevkev/pen/bVVGdE
it works so far .. but the thing is that hidden images in an onclick function for buttons etc. doesnt work!
(watch through my code and scroll to end and push the button)
you can see in the network feedback that it already had load the images.
i could figure out that the problem is "display:none"
.pop {
display:none;
z-index:99;
position:absolute;
width:100%;
height:auto;
background:inherit;
}
Because display: none; elements are unknown in position. And the lazyloader doesn't know, when and if you change this. Therefore it decides to eager load it. If you want a lazyloader that automatically detects this use https://github.com/aFarkas/lazysizes/.
As alternative I would recommend justlazy, because it's more lightweight and don't uses jQuery.
1. Define placeholder (similar to that what you have done):
<span data-src="path/to/image" data-alt="alt" data-title="title"
class="placeholder">
</span>
2. Initialize lazy loading after your button click:
$(document).ready(function () {
$("#art").click(function () {
$("#art_pop").fadeIn(300);
Justlazy.registerLazyLoadByClass("placeholder", {
// image will be loaded if it is 300 pixels
// below the lower display border
threshold: 300
});
});
// other code ..
});
thanks guys! but I also got a working solution on this:
http://codepen.io/kevkev/full/meebpQ/
$(document).ready(function () {
$("#art").click(function () {
$("#art_pop").fadeIn(300);
});
$(".pop > span, .pop").click(function () {
$(".pop").fadeOut(600);
});
});
;(function($) {
$.fn.unveil = function(threshold, callback) {
var $w = $(window),
th = threshold || 0,
retina = window.devicePixelRatio > 1,
attrib = retina? "data-src-retina" : "data-src",
images = this,
loaded;
this.one("unveil", function() {
var source = this.getAttribute(attrib);
source = source || this.getAttribute("data-src");
if (source) {
this.setAttribute("src", source);
if (typeof callback === "function") callback.call(this);
}
});
function unveil() {
var inview = images.filter(function() {
var $e = $(this);
if ($e.is(":hidden")) return;
var wt = $w.scrollTop(),
wb = wt + $w.height(),
et = $e.offset().top,
eb = et + $e.height();
return eb >= wt - th && et <= wb + th;
});
loaded = inview.trigger("unveil");
images = images.not(loaded);
}
$w.on("scroll.unveil resize.unveil lookup.unveil", unveil);
unveil();
return this;
};
})(window.jQuery || window.Zepto);
/* OWN JAVASCRIPT */
$(document).ready(function() {
$("img").unveil(200, function() {
$(this).load(function() {
this.style.opacity = 1;
});
});
});

switchClass() swaps class after 3rd click

I got the following:
http://jsfiddle.net/GsL8Z/
I want to toggle the size of an image. After each toggle, I want to replace the scaled image with its instance in right size.
This actually works pretty well, but only the first time. After the third click, the wrong class gets allocated.
Any help would be greatly appreciated!
HTML
<div id="projekt_1" class="projekt">
<ul class="bilder">
<li><img class="imgKlein" src="images/mainworks_th.jpg" alt="Mainworks"/></li>
</ul>
</div>​
CSS
.imgGross{
height: 450px;
}
.imgKlein{
height: 215px;
}​
JS
var status = true,
obj = $('.projekt'),
projekte = $.makeArray(obj),
obj = $('.bilder'),
projekte_li = $.makeArray(obj),
obj = $('.projekt li img'),
projekte_li_img = $.makeArray(obj);
var images = new Array (2);
images[0] = $('<img class="imgKlein"/>').attr({src: 'images/mainworks_th.jpg'});
images[1] = $('<img class="imgGross"/>').attr({src:'images/mainworks_pre.jpg'});
$('#projekt_1').click(function() {
if (status == true) {
$("img", this).switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad" );
setTimeout(function(){
$(projekte_li[0]).html(images[1]);
}, 2000);
status = false;
}
else {
$("img", this).switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad" );
setTimeout(function(){
$(projekte_li[0]).html(images[0]);
}, 2000);
status = true;
}
return false;
});
Somehow the switchClass is having problems with you replacing the whole html for the img. As a matter of fact you can just change the src.
Also, you are better off using .toggle() in jQuery to handle things changing back and forward on each click.
By the way, also the setTimeout can give problems. .switchClass() has a complete handler that runs after the animation is complete and you should use that.
So, the solution could be:
$('#projekt_1').toggle(
function(e) {
$("img", this).switchClass("imgKlein", "imgGross", 1000, "easeInOutQuad",
function() {
$(this).attr({ src: 'images/mainworks_pre.jpg', alt: "Mainworks_pre" });
});
return false;
},
function (e) {
$("img", this).switchClass("imgGross", "imgKlein", 1000, "easeInOutQuad",
function(){
$(this).attr({ src: 'images/mainworks_th.jpg', alt: "Mainworks_TH" });
});
return false;
}
);
Fiddle: http://jsfiddle.net/GsL8Z/2/
i testet something with the example from jquery-ui and it works
the code is little bit shorter than yours:
$(function() {
$( "#projekt_1" ).click(function(){
$(".imgKlein").switchClass( "imgKlein", "imgGross", 1000, "easeInOutQuad", function()
{
$("img").attr("src", "http://www.spielwiki.de/images/e/e9/Kleines_M%C3%A4dchen%2C_zu_gro%C3%9Fer_Luftballon.png");
});
$(".imgGross").switchClass( "imgGross", "imgKlein", 1000, "easeInOutQuad", function()
{
$("img").attr("src", "http://images.all-free-download.com/images/graphiclarge/small_house_329.jpg");
});
return false;
});
});​
the link to the example: http://jsfiddle.net/DWrC6/24/

jqPlot - How to catch double click event

I'm using the latest version of jqPlot (v1.0.0b2_r1012) to plot my histograms.
To catch a single click event I'm using 'jqplotDataClick' as follows:
$('#myHistogram').bind('jqplotDataClick', function(ev, seriesIndex, pointIndex, data) {
// Do something
});
Is it possible to catch a double click event instead?
Unfortunately I've been unable to find such event in jqplot.barRenderer.js.
Update:
I've made the following two changes to my jqplot.barRenderer.js file:
Register jqplotDblClick event
$.jqplot.BarRenderer.prototype.init = function(options, plot) {
...
...
plot.postInitHooks.addOnce(postInit);
plot.postDrawHooks.addOnce(postPlotDraw);
plot.eventListenerHooks.addOnce('jqplotMouseMove', handleMove);
plot.eventListenerHooks.addOnce('jqplotMouseDown', handleMouseDown);
plot.eventListenerHooks.addOnce('jqplotMouseUp', handleMouseUp);
plot.eventListenerHooks.addOnce('jqplotClick', handleClick);
plot.eventListenerHooks.addOnce('jqplotDblClick', handleDblClick);
//$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]); I've also tried this but without any luck
plot.eventListenerHooks.addOnce('jqplotRightClick', handleRightClick);
};
Implement handleDblClick function
function handleDblClick(ev, gridpos, datapos, neighbor, plot) {
if (neighbor) {
var ins = [neighbor.seriesIndex, neighbor.pointIndex, neighbor.data];
var evt = jQuery.Event('jqplotDataDblClick');
evt.pageX = ev.pageX;
evt.pageY = ev.pageY;
plot.target.trigger(evt, ins);
}
}
And then I bind jqplotDataDblClick in my JavaScript file as follows:
$('#myHistogram').bind('jqplotDataDblClick', function(ev, seriesIndex, pointIndex, data) {
alert("Ohayo!"); // Good morning in Japanese
});
However the double click event doensn't get fired when I double click on one of my vertical bar graphs. I've tried binding "jqplotRightClick" but that doesn't work either. If I use "jqplotClick" then everything works as expected.
Does anyone know what I am doing wrong here?
Update 2:
RE: I've tried binding "jqplotRightClick" but that doesn't work either. (see above)
I've just found out that in order to catch this event you have to set the following:
captureRightClick: true,
See: How to capture right click event
From the "cursor" plugin, they handle it like this:
if (c.dblClickReset) {
$.jqplot.eventListenerHooks.push(['jqplotDblClick', handleDblClick]);
}
EDITS
I can capture the double click by just binding the 'jqplotDblClick'. I did not have to push the event. Sorry for the misdirection, my answer above meant to show that the event already existed. See working fiddle here. The only additional thing I added was CSS rules to make the div un-selectable since a double-click will select it.
HTML:
<div id="chart1" style="margin-top:20px; margin-left:20px; width:300px; height:300px; -moz-user-select: -moz-none;-khtml-user-select: none;-webkit-user-select: none;-ms-user-select: none;user-select: none;"></div>​
JS:
$(document).ready(function(){
$.jqplot.config.enablePlugins = true;
var s1 = [2, 6, 7, 10];
var ticks = ['a', 'b', 'c', 'd'];
plot1 = $.jqplot('chart1', [s1], {
seriesDefaults:{
renderer:$.jqplot.BarRenderer
},
axes: {
xaxis: {
renderer: $.jqplot.CategoryAxisRenderer,
ticks: ticks
}
}
});
$('#chart1').bind('jqplotDblClick',
function (ev, seriesIndex, pointIndex, data) {
alert('hi');
});
});

ckeditor dialog positioning

Dialog windows for CKEditor by default appear in the middle of the page but if the page is an iframe with a big height the dialogs appear way down the page.
Is it possible to configure CKEditor to position the dialogs in a different quadrant of the page? For example top middle?
Yes, the link MDaubs gives will guide you to do what you want.
I've had to do this in the past and the following snippet will demonstrate a solution for your problem:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x,0); // Top center
}
})
You can place this in the config file or the ready function for jQuery.
The solution by zaf works in that it helps to position the dialog, but I've found it to produce a bunch of side effects as to how the dialog functions (failing to display the URL of the image in the image dialog is one example).
It turned out that the original onShow() method that is being overridden returns a meaningful value that we should keep. This could be due to a plugin or something, but here's the code that ultimately worked for me:
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
var result = onShow.call(this);
this.move(this.getPosition().x, $(e.editor.container.$).position().top);
return result;
}
});
This may be way you're looking for:
Programatically set the position of CKEditor's dialogs
I just had the same issue as Yehonatan and found this question really fast via Google. But after using the answer provided by zaf I still didn't get a dialog to appear in the proper position when the editor is loaded within an iframe.
In stead of the position() method I used the offset() method to place a dialog right under the toolbar. Together with the response of jonespm I came to this code that seems to work very good, also with existing dialogs.
CKEDITOR.on('dialogDefinition', function(e) {
var dialogName = e.data.name;
var dialogDefinition = e.data.definition;
var onShow = dialogDefinition.onShow;
dialogDefinition.onShow = function() {
this.move(this.getPosition().x, jQuery(this.getParentEditor().container.$).offset().top);
if (typeof onShow !== 'undefined' && typeof onShow.call === 'function')
{
return onShow.call(this);
}
}
});
Hopefully this code can help others with the same issue as me.
Correct syntax is:
CKEDITOR.on('dialogDefinition', function(ev) {
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
var dialog = dialogDefinition.dialog;
if (dialogName == 'image2') {
dialogDefinition.onShow = CKEDITOR.tools.override(dialogDefinition.onShow, function(original) {
return function() {
original.call(this);
CKEDITOR.tools.setTimeout( function() {
/*do anything: this.move(this.getPosition().x, $(e.editor.container.$).position().top);*/
}, 0);
}
});
}
});

Resources