CKEditor + IMCE + Lightbox2 einrichten --> Anleitung

Erprobt mit folgender Kombination:

Drupal 6.15 DE

CKeditor 6.x-1.0-beta1 (Modul) + CKEditor 3.1

IMCE 6.x-1.3

Lightbox2 6.x-1.9

• Gehe in den Admin-Bereich

Öffne:

Verwalten --> Einstellungen --> Lightbox --> automatic image handling --> Custom Class Images

Dort in "Benutzerdefinierte Bildauslöser CSS-Klassen" folgendes eintragen:

volkerclass

• Öffne Datei:

sites/all/modules/fckeditor/fckeditor/editor/dialog/fck_image.html

Suche:

<span fcklang="DlgGenClass">Stylesheet Classes</span><br />
<input id="txtAttClasses" style="width: 100%" type="text" />


Ersetze mit:

<span fcklang="DlgGenClass">Stylesheet Classes</span><br />
<input id="txtAttClasses" style="width: 100%" value="volkerclass" type="text" />

• Öffne Datei: sites/all/modules/fckeditor/fckeditor.module

Suche:

$js .= $js_id .".Config['ImageBrowserURL']= '". $host ."index.php?q=imce&app=FCKEditor|url@txtUrl|width@txtWidth|height@txtHeight';\n";


Ersetze mit:

// Änderung Lightbox2 Anfang
//        $js .= $js_id .".Config['ImageBrowserURL']= '". $host ."index.php?q=imce&app=FCKEditor|url@txtUrl|width@txtWidth|height@txtHeight';\n";
          $js .= $js_id .".Config['ImageBrowserURL']= '". $host ."?q=imce&app=FCKEditor|url@txtUrl|url2@txtLnkUrl|width@txtWidth|height@txtHeight';\n";
// Änderung Lightbox2 Ende

• Öffne Datei:

sites/all/modules/imce/js/imce_set_app.js

Ersetze alles mit:

// $Id: imce_set_app.js,v 1.3.2.6 2009/02/20 21:17:25 ufku Exp $
//When imce url contains &app=appName|fileProperty1@correspondingFieldId1|fileProperty2@correspondingFieldId2|...
//the specified fields are filled with the specified properties of the selected file.

var appFields = {}, appWindow = (top.appiFrm||window).opener;

// CUSTOM CHANGE BEGINS
var strUrl;

// Lets define the maximum dimension an image can have
var strMaxHeight = 700;
var strMaxWidth = 500;
// to store the difference between actual size and maximum
var strHeightDifference;
var strWidthDifference;
// variables to check if an image is higher or wider than allowed
var isHigher;
var isWider;
// To know wether we should resize the image based on Height or Width
var isHeightBigger;
// How much should we shrink the image
var strResizeFactor;
// Should we do a resize
var doResize = 0;

var strWidth;
var strHeight;

// CUSTOM CHANGE ENDS

//execute when imce loads.
imce.hooks.load.push(function(win) {
var data = decodeURIComponent(location.href.substr(location.href.lastIndexOf('app=')+4)).split('|');
var appName = data.shift();
//extract fields
for (var i in data) {
var arr = data[i].split('@');
appFields[arr[0]] = arr[1];
}
//run custom onload function if available.
if (appFields['onload'] && $.isFunction(appWindow[appFields['onload']])) {
appWindow[appFields['onload']](win);
delete appFields['onload'];
}
//set custom sendto function. appFinish is the default.
var sendtoFunc = appFields['url'] ? appFinish : false;
//check sendto@funcName syntax in URL
if (appFields['sendto'] && $.isFunction(appWindow[appFields['sendto']])) {
sendtoFunc = appWindow[appFields['sendto']];
delete appFields['sendto'];
}
//check windowname+ImceFinish. old method
else if (win.name && $.isFunction(appWindow[win.name +'ImceFinish'])) {
sendtoFunc = appWindow[win.name +'ImceFinish'];
}

//highlight file
if (appFields['url']) {
if (appFields['url'].indexOf(',') > -1) {//support multiple url fields url@field1,field2..
var arr = appFields['url'].split(',');
for (var i in arr) {
if ($('#'+ arr[i], appWindow.document).size()) {
appFields['url'] = arr[i];
break;
}
}
}
var filename = $('#'+ appFields['url'], appWindow.document).val();
imce.highlight(filename.substr(filename.lastIndexOf('/')+1));
}
//set send to
if (sendtoFunc) {
imce.setSendTo(Drupal.t('Send to @app', {'@app': appName}), sendtoFunc);
}
});

//sendTo function
var appFinish = function(file, win) {
var doc = $(appWindow.document);

// CUSTOM CHANGE START
// Loop through the values to place them in variables
for (var i in appFields) {
if(appFields[i] == 'txtUrl'){
strUrl = file[i];
}else if(appFields[i] == 'txtWidth'){
strWidth = file[i];
}else if(appFields[i] == 'txtHeight'){
strHeight = file[i];
}
}

// Let's begin by constructing the url2 url, by stripping the _thumb and preview from it
if(strUrl.indexOf("_thumb") > 0){
strUrl = strUrl.replace("_thumb", "");

}else if(strUrl.indexOf("_preview") > 0){
strUrl = strUrl.replace("_preview", "");
}

// Change the url2 url to the new value
file['url2'] = strUrl;

//----------------
// IF YOU DON'T WANT THE CSS SIZE CHANGE SKIP THIS STEP
//----------------
// Lets find out if the image is higher than allowed
if(strHeight > strMaxHeight)
{
// Image is taller than allowed
isHigher = 1;
// Calculate difference
strHeightDifference = strHeight - strMaxHeight;
// We need to resize image
doResize = 1;
// Debug alert ignore
alert("height - strMaxHeight : "+strHeightDifference);
}
else
{
// Image is not higher
isHigher = 0;
}

// Let's find out if image is wider than allowed
if(strWidth > strMaxWidth)
{
// Image is wider
isWider = 1;
// Calculate the difference
strWidthDifference = strWidth - strMaxWidth;
// We need to resize image
doResize = 1;
// Debug alert ignore this
// alert("width - strMaxWidth: "+strWidthDifference);
}
else
{
// Image is not wider
isWider = 0;
}
// Debug Alert - ignore this
//alert("higher : " + isHigher);
//alert("wider : "+ isWider);

// We need to calculate the resize factor
if(isHigher == 1 && isWider == 1)
{
// Both height and width are bigger than maximum allowed

// If image is both higher and wider than allowed we need to check
// Which difference is bigger so we can calculate the resize factor
// so that the aspect ratio is correct

// Debug alert ignore
// alert("Both are bigger");

// Let's check if Height difference is bigger than width difference
if(strHeightDifference > strWidthDifference)
{
// Height difference is bigger, so we need to calculate the resize
// Factor in relation to height
isHeightBigger = 1;
strResizeFactor = strMaxHeight / strHeight;
// Round the resizefactor to 1 decimal
strResizeFactor = Math.round(strResizeFactor*10)/10;

// Debug alert ignore
// alert("Height is bigger than width, resizefactor :"+strResizeFactor);
}
else
{
// Height difference is not bigger, so we need to calculate the resize
// Factor in relation to width
isHeightBigger = 0;
strResizeFactor = strMaxWidth / strWidth;
strResizeFactor = Math.round(strResizeFactor*10)/10;

// Debug alert ignore
// alert("Height is smaller than width , resize factor :"+strResizeFactor);
}
}
else if(isHigher == 1 && isWider == 0)
{
// If image is only higher than allowed we need to calculate
// the resize factor in relation to the height
strResizeFactor = strMaxHeight / strHeight;
strResizeFactor = Math.round(strResizeFactor*10)/10;

// Debug alert ignore
// alert("Height is only an issue ; /r/n resize factor :"+strResizeFactor);
}
else if(isHigher == 0 && isWider ==1)
{
// If image is only wider than allowed we need to calculate
// the resize factor in relation to the width
strResizeFactor = strMaxWidth / strWidth;
strResizeFactor = Math.round(strResizeFactor*10)/10;
// Debug alert ignore
// alert("Width is only an issue ; \r\n resize factor :"+strResizeFactor);
}

if(doResize == 1){
alert("Old width: "+ strWidth);
strWidth = strWidth * strResizeFactor;
strWidth = Math.round(strWidth);
alert("New width: "+strWidth);

alert("Old Height: "+strHeight);
strHeight = strHeight * strResizeFactor;
strHeight = Math.round(strHeight);
alert("New height: "+strHeight);

file["width"] = strWidth;
file["height"] = strHeight;

}
//----------------

// CUSTOM CHANGE ENDS

for (var i in appFields) {
doc.find('#'+ appFields[i]).val(file[i]);
// alert("i : "+i+" | AppFields[i] : "+appFields[i]+" | file[i] : "+file[i]);
}
if (appFields['url']) {
try{doc.find('#'+ appFields['url']).blur().change().focus()}catch(e){};
try{doc.find('#'+ appFields['url']).trigger('onblur').trigger('onchange').trigger('onfocus')}catch(e){};//inline events
}
appWindow.focus();
win.close();
};