/**
* ckeditor4 for QUIQQER
*
* @module package/quiqqer/ckeditor4/bin/Editor
* @author www.pcsg.de (Henning Leutz)
*
* @require require
* @require controls/editors/Editor
* @require Locale
* @require Ajax
* @require qui/utils/Math
* @require css!package/quiqqer/ckeditor4/bin/Editor.css
*/
define('package/quiqqer/ckeditor4/bin/Editor', [
'require',
'controls/editors/Editor',
'Locale',
'Ajax',
'qui/utils/Math',
'qui/utils/Elements',
'css!package/quiqqer/ckeditor4/bin/Editor.css'
], function(require, Editor, Locale, Ajax, QUIMath, QUIElements)
{
"use strict";
return new Class({
Extends : Editor,
Type : 'package/quiqqer/ckeditor4/bin/Editor',
Binds : [
'$onDestroy',
'$onDraw',
'$onSetContent',
'$onGetContent',
'$onDrop',
'$onAddCSS',
'$onInstanceReadyListener'
],
initialize : function(Manager, options)
{
this.parent( Manager, options );
this.$cssFiles = {};
this.addEvents({
onDestroy : this.$onDestroy,
onDraw : this.$onDraw,
onSetContent : this.$onSetContent,
onGetContent : this.$onGetContent,
onDrop : this.$onDrop,
onAddCSS : this.$onAddCSS
});
},
/**
* Load the CKEditor Instance into an Textarea or DOMNode Element
*
* @param {HTMLElement} Container
* @param {Object} Editor - controls/editors/Editor
*/
loadInstance : function(Container, Editor)
{
if ( typeof window.CKEDITOR === 'undefined' ) {
return;
}
var self = this,
Instance = Container;
if ( !Container.getElement( 'textarea' ) )
{
var size = Container.getSize();
Instance = new Element('textarea', {
id : this.getId(),
styles : {
height : size.y,
width : size.x - 20
}
}).inject( Container );
}
if ( Instance.nodeName != 'TEXTAREA' ) {
Instance = Instance.getElement( 'textarea' );
}
var instance = Instance.get( 'id' );
if ( window.CKEDITOR.instances[ instance ] ) {
window.CKEDITOR.instances[ instance ].destroy( true );
}
Editor.setAttribute( 'instancename', instance );
// http://docs.ckeditor.com/#!/guide/dev_howtos_dialog_windows
window.CKEDITOR.on( 'dialogDefinition', function( ev )
{
self.$imageDialog( ev );
self.$linkDialog( ev );
});
this.getButtons(function(buttons)
{
// parse the buttons for the ckeditor
var b, g, i, len, blen, glen, group, items,
buttonEntry, lineEntry, groupEntry;
var lines = buttons.lines || [],
toolbar = [];
for ( i = 0, len = lines.length; i < len; i++ )
{
items = [];
lineEntry = lines[ i ];
// groups
for ( g = 0, glen = lineEntry.length; g < glen; g++ )
{
group = [];
groupEntry = lineEntry[ g ];
// buttons
for ( b = 0, blen = groupEntry.length; b < blen; b++ )
{
buttonEntry = groupEntry[ b ];
if ( buttonEntry.type == 'seperator' )
{
group.push( '-' );
continue;
}
group.push( buttonEntry.button );
}
toolbar.push( group );
}
toolbar.push( '/' );
}
var height = Instance.getSize().y - 140,
width = Instance.getSize().x + 20;
if ( self.getAttribute( 'width' ) ) {
width = self.getAttribute( 'width' );
}
if ( self.getAttribute( 'height' ) ) {
height = self.getAttribute( 'height' ) - 140;
}
var zIndex = QUIElements.getComputedZIndex( Container );
window.CKEDITOR.replace(instance, {
language : Locale.getCurrent(),
baseHref : URL_DIR,
basePath : URL_DIR,
height : height,
width : width,
toolbar : toolbar,
allowedContent : true,
extraAllowedContent : 'div(*)[*]{*}, iframe(*)[*]{*}',
contentsCss : Object.keys( self.$cssFiles ),
bodyClass : self.getAttribute( 'bodyClass' ),
// plugins : CKEDITOR_NEXGAM_PLUGINS,
// templates_files : [URL_OPT_DIR +'base/bin/pcsgEditorPlugins/templates.php'],
baseFloatZIndex : zIndex
});
});
},
/**
* Editor onDestroy Event
*
* @param {Object} Editor - controls/editors/Editor
*/
$onDestroy : function(Editor)
{
var Instance = Editor.getInstance();
if ( window.CKEDITOR.instances[ Instance.name ] )
{
try
{
window.CKEDITOR.instances[ Instance.name ].destroy( true );
} catch ( e ) {
}
window.CKEDITOR.instances[ Instance.name ] = null;
delete window.CKEDITOR.instances[ Instance.name ];
window.CKEDITOR.removeListener( 'instanceReady', this.$onInstanceReadyListener );
}
},
/**
* Editor onDraw Event
* if the editor is to be drawn
*
* @param {HTMLElement} Container
* @param {Object} Editor - controls/editors/Editor
*/
$onDraw : function(Container, Editor)
{
var self = this;
// load CKEDITOR
require([ URL_OPT_DIR +'bin/package-ckeditor4/ckeditor.js' ], function()
{
/*
CKEDITOR.editorConfig = function( config ) {
config.language = 'fr';
config.uiColor = '#AADC6E';
};
*/
// CKEditor aufbauen
// CKEDITOR_BASEPATH = URL_DIR;
/*
CKEDITOR_NEXGAM_TOOLBAR = [
{ name: 'clipboard', items : [ 'Source', ,'Maximize', '-','pcsg_short', 'Templates','-', 'Paste','PasteText','PasteFromWord','-','Undo','Redo' ] },
{ name: 'basicstyles', items : [ 'Bold','Italic', 'Underline', 'Strike','-','Subscript','Superscript','-','RemoveFormat' ] },
{ name: 'paragraph', items : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','NumberedList','BulletedList' ] },
{ name: 'pcsg', items : [ 'pcsg_image','-', 'pcsg_link', 'pcsg_unlink' ] },
{ name: 'blocks', items : [ 'Format', 'pcsg_youtube' ] }
];
CKEDITOR_NEXGAM_PLUGINS = '' +
'basicstyles,blockquote,button,clipboard,contextmenu,div,elementspath,enterkey,entities,find,' +
'font,format,indent,justify,keystrokes,list,liststyle,maximize,pastefromword,' +
'pastetext,removeformat,showblocks,showborders,sourcearea,stylescombo,' +
'table,tabletools,specialchar,tab,templates,toolbar,undo,wysiwygarea,wsc,pcsg_image,pcsg_link,pcsg_short,pcsg_youtube';
CKEDITOR_NEXGAM_CSS = [
URL_USR_DIR +"bin/nexgam3/css/reset.css",
URL_USR_DIR +"bin/nexgam3/css/style.css",
URL_USR_DIR +"bin/nexgam3/css/wysiwyg.css",
URL_USR_DIR +"bin/nexgam3/css/images.css",
URL_USR_DIR +"bin/nexgam3/css/review.css"
];
CKEDITOR_NEXGAM_BODY_CLASS = 'content left content-inner-container wysiwyg';
*/
window.CKEDITOR.on('instanceReady', self.$onInstanceReadyListener );
Editor.loadInstance( Container, Editor );
});
},
/**
* event : instance ready
* @param instance
*/
$onInstanceReadyListener : function(instance)
{
if ( typeof instance.editor === 'undefined' ||
typeof instance.editor.name === 'undefined' ||
instance.editor.name !== this.getAttribute( 'instancename' ) )
{
return;
}
this.setInstance( instance.editor );
this.fireEvent( 'loaded', [ this, instance.editor ] );
instance.editor.focus();
},
/**
* Editor onSetContent Event
*
* @param {String} content
* @param {Object} Editor - controls/editors/Editor
*/
$onSetContent : function(content, Editor)
{
if ( Editor.getInstance() ) {
Editor.getInstance().setData( content );
}
},
/**
* Editor onGetContent Event
*
* @param {Object} Editor - controls/editors/Editor
*/
$onGetContent : function(Editor)
{
if ( Editor.getInstance() ) {
Editor.setAttribute( 'content', Editor.getInstance().getData() );
}
},
/**
* Set the focus to the editor
*/
focus : function()
{
if ( this.getInstance() ) {
this.getInstance().focus();
}
},
/**
* Switch to source mode
*/
switchToSource : function()
{
if ( this.getInstance() ) {
this.getInstance().setMode( 'source' );
}
},
/**
* Switch to wysiwyg editor
*/
switchToWYSIWYG : function()
{
if ( this.getInstance() ) {
this.getInstance().setMode( 'wysiwyg' );
}
},
/**
* Hide the toolbar
*/
hideToolbar : function()
{
var Toolbar = this.getElm().getElement( '.cke_top' );
if ( Toolbar ) {
Toolbar.setStyle( 'display', 'none' );
}
},
/**
* show the toolbar
*/
showToolbar : function()
{
var Toolbar = this.getElm().getElement( '.cke_top' );
if ( Toolbar ) {
Toolbar.setStyle( 'display', null );
}
},
/**
* Set the height of the instance
*
* @param {Number} height
*/
setHeight : function(height)
{
if ( this.getInstance() ) {
this.getInstance().resize( false, height );
}
this.setAttribute( 'height', height );
},
/**
* Set the height of the instance
*
* @param {Number} width
*/
setWidth : function(width)
{
if ( this.getInstance() ) {
this.getInstance().resize( width, false );
}
this.setAttribute( 'width', width );
},
/**
* event : on add css
*
* @param {String} file - path to the css file
* @param {Object} Editor - controls/editor/Editor
*/
$onAddCSS : function(file, Editor)
{
var Instance = this.getInstance();
this.$cssFiles[ file ] = true;
if ( Instance )
{
var Doc = Editor.getDocument(),
Link = Doc.createElement('link');
Link.href = file;
Link.rel = "stylesheet";
Link.type = "text/css";
Doc.head.appendChild( Link );
}
},
/**
* event : on Drop
* @param {Object} params
*/
$onDrop : function(params)
{
var Instance = this.getInstance();
for ( var i = 0, len = params.length; i < len; i++ ) {
Instance.insertHtml( "<img src="+ params[ i ].url +" />" );
}
},
/**
* edit the image dialog
*
* @param {DOMEvent} ev - CKEvent
* @return {DOMEvent} ev (CKEvent)
*/
$imageDialog : function(ev)
{
// Take the dialog name and its definition from the event data.
var self = this,
dialogName = ev.data.name,
dialogDefinition = ev.data.definition;
/**
* Image dialog
*/
if ( dialogName != 'image' ) {
return ev;
}
var oldOnShow = dialogDefinition.onShow;
// Get a reference to the "Link Info" tab.
dialogDefinition.onShow = function()
{
var Button;
oldOnShow.bind( this )();
// image button
var UrlGroup = this.getContentElement('info', 'txtUrl' )
.getElement()
.$;
var UrlInput = UrlGroup.getElement( 'input[type="text"]' );
var HeightInput = this.getContentElement('info', 'txtHeight' )
.getElement().$
.getElement( 'input[type="text"]' );
var WidthInput = this.getContentElement('info', 'txtWidth' )
.getElement().$
.getElement( 'input[type="text"]' );
if ( !UrlGroup.getElement( '.qui-button' ) )
{
Button = new Element('button', {
'class' : 'qui-button',
html : '<span class="icon-picture"></span>',
events :
{
click : function()
{
self.openMedia({
events :
{
onSubmit : function(Win, data)
{
UrlInput.value = data.url;
Ajax.get('ajax_media_details', function(fileData)
{
if ( fileData.image_height > 500 ||
fileData.image_width > 500 )
{
var result = QUIMath.resizeVar(
fileData.image_height,
fileData.image_width,
500
);
HeightInput.value = result.var1;
WidthInput.value = result.var2;
} else
{
HeightInput.value = fileData.image_height;
WidthInput.value = fileData.image_width;
}
}, {
project : data.project,
fileid : data.id
});
}
}
});
}
}
}).inject( UrlGroup );
Button.getPrevious().setStyles({
'float' : 'left'
});
}
// link button
var LinkGroup = this.getContentElement('Link', 'txtUrl' )
.getElement()
.$;
if ( LinkGroup.getElement( '.qui-button' ) ) {
return;
}
var LinkInput = LinkGroup.getElement( 'input[type="text"]' );
Button = new Element('button', {
'class' : 'qui-button',
html : '<span class="icon-home"></span>',
events :
{
click : function()
{
self.openProject({
events :
{
onSubmit : function(Win, data) {
LinkInput.value = data.urls[ 0 ];
}
}
});
}
}
}).inject( LinkGroup );
var Prev = Button.getPrevious();
Prev.setStyles({
'float' : 'left',
width : Prev.getSize().x - 100
});
};
return ev;
},
/**
* edit the link dialog
*
* @param {DOMEvent} ev - CKEvent
* @return {DOMEvent} ev - CKEvent
*/
$linkDialog : function(ev)
{
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
/**
* Link dialog
*/
if ( dialogName != 'link' ) {
return ev;
}
// remove protokoll dropdown
//dialogDefinition.getContents( 'info' ).remove( 'protocol');
// remove protokoll at insertion
var Protokoll;
var dialogDefinition = ev.data.definition,
Url = dialogDefinition.getContents( 'info' ).get( 'url' ),
orgCommit = Url.commit;
Url.commit = function( data )
{
orgCommit.call( this, data );
Protokoll = dialogDefinition.dialog
.getContentElement('info', 'protocol' )
.getElement()
.$
.getElement('select');
data.url = {
protocol : Protokoll.value,
url : this.getValue()
};
};
var self = this,
oldOnShow = dialogDefinition.onShow;
// Get a reference to the "Link Info" tab.
dialogDefinition.onShow = function()
{
oldOnShow.bind( this )();
var UrlGroup = this.getContentElement('info', 'url' )
.getElement()
.$;
if ( UrlGroup.getElement( '.qui-button' ) ) {
return;
}
var UrlInput = UrlGroup.getElement( 'input[type="text"]' );
Protokoll = this.getContentElement('info', 'protocol' )
.getElement()
.$
.getElement('select');
UrlInput.setStyles({
'float' : 'left',
width : UrlInput.getSize().x - 100
});
var Links = new Element('button', {
'class' : 'qui-button',
html : '<span class="icon-home"></span>',
events :
{
click : function()
{
self.openProject({
events :
{
onSubmit : function(Win, data)
{
UrlInput.value = data.urls[ 0 ];
Protokoll.value = '';
}
}
});
}
}
}).inject( UrlInput, 'after' );
// image button
new Element('button', {
'class' : 'qui-button',
html : '<span class="icon-picture"></span>',
events :
{
click : function()
{
self.openMedia({
events :
{
onSubmit : function(Win, data)
{
UrlInput.value = data.url;
Protokoll.value = '';
}
}
});
}
}
}).inject( Links, 'after' );
};
return ev;
}
});
});