From 5753c97c6272e16462e40a62ac9b4d620d83a3d7 Mon Sep 17 00:00:00 2001
From: Henning Leutz <leutz@pcsg.de>
Date: Fri, 24 Apr 2015 13:13:47 +0200
Subject: [PATCH] new editor class api
---
bin/Editor.css | 73 ++++++++------
bin/Editor.js | 258 +++++++++++++++++++++++++------------------------
2 files changed, 172 insertions(+), 159 deletions(-)
diff --git a/bin/Editor.css b/bin/Editor.css
index 4e69c2d..ebe7939 100644
--- a/bin/Editor.css
+++ b/bin/Editor.css
@@ -1,39 +1,50 @@
@CHARSET "UTF-8";
-.cke_dialog_contents .qui-button {
- background: none repeat scroll 0 0 #EDEDED;
- border: medium none;
- border-radius: 3px;
- box-shadow: 0 0 2px #999999;
- color: #606060;
- cursor: pointer;
+.control-editor,
+.control-editor-container {
float: left;
- line-height: 30px;
- margin: 0 5px;
- padding: 0 10px;
- position: relative;
- transition: all 0.2s ease 0s;
+ height: 100%;
+ width: 100%;
}
-.cke_dialog_contents .qui-button-active,
-.cke_dialog_contents .qui-button:active,
-.cke_dialog_contents .qui-button:hover {
- background: #0069B4;
- color: #FFFFFF;
-
- box-shadow: none;
- -moz-box-shadow: none;
- -webkit-box-shadow: none;
+.control-editor-container {
+ overflow: hidden;
}
-.cke_dialog_contents .qui-button:hover span {
- color: #FFFFFF;
-}
+/*.cke_dialog_contents .qui-button {*/
+ /*background: none repeat scroll 0 0 #EDEDED;*/
+ /*border: medium none;*/
+ /*border-radius: 3px;*/
+ /*box-shadow: 0 0 2px #999999;*/
+ /*color: #606060;*/
+ /*cursor: pointer;*/
+ /*float: left;*/
+ /*line-height: 30px;*/
+ /*margin: 0 5px;*/
+ /*padding: 0 10px;*/
+ /*position: relative;*/
+ /*transition: all 0.2s ease 0s;*/
+/*}*/
-.cke_dialog_contents [class^="icon-"],
-.cke_dialog_contents [class*=" icon-"] {
- font-family: FontAwesome;
- font-style: normal;
- font-weight: normal;
- text-decoration: inherit;
-}
+/*.cke_dialog_contents .qui-button-active,*/
+/*.cke_dialog_contents .qui-button:active,*/
+/*.cke_dialog_contents .qui-button:hover {*/
+ /*background: #0069B4;*/
+ /*color: #FFFFFF;*/
+
+ /*box-shadow: none;*/
+ /*-moz-box-shadow: none;*/
+ /*-webkit-box-shadow: none;*/
+/*}*/
+
+/*.cke_dialog_contents .qui-button:hover span {*/
+ /*color: #FFFFFF;*/
+/*}*/
+
+/*.cke_dialog_contents [class^="icon-"],*/
+/*.cke_dialog_contents [class*=" icon-"] {*/
+ /*font-family: FontAwesome;*/
+ /*font-style: normal;*/
+ /*font-weight: normal;*/
+ /*text-decoration: inherit;*/
+/*}*/
diff --git a/bin/Editor.js b/bin/Editor.js
index b244d7f..d17773a 100644
--- a/bin/Editor.js
+++ b/bin/Editor.js
@@ -33,13 +33,14 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
Type : 'package/quiqqer/ckeditor4/bin/Editor',
Binds : [
- '$onDestroy',
- '$onDraw',
- '$onSetContent',
- '$onGetContent',
- '$onDrop',
- '$onAddCSS',
- '$onInstanceReadyListener'
+ '$onLoad',
+ '$onDestroy',
+ '$onSetContent',
+ '$onGetContent',
+ '$onDrop',
+ '$onResize',
+ '$onAddCSS',
+ '$onInstanceReadyListener'
],
initialize : function(Manager, options)
@@ -49,8 +50,9 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
this.$cssFiles = {};
this.addEvents({
+ onLoad : this.$onLoad,
+ onResize : this.$onResize,
onDestroy : this.$onDestroy,
- onDraw : this.$onDraw,
onSetContent : this.$onSetContent,
onGetContent : this.$onGetContent,
onDrop : this.$onDrop,
@@ -58,45 +60,63 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
});
},
+ /**
+ * Editor onLoad Event
+ * if the editor is to be drawn and inserted
+ *
+ * @param {Object} data - Editor data
+ */
+ $onLoad : function(data)
+ {
+ var self = this;
+
+ // load CKEDITOR
+ require([ URL_OPT_DIR +'bin/package-ckeditor4/ckeditor.js' ], function()
+ {
+ window.CKEDITOR.on('instanceReady', self.$onInstanceReadyListener );
+
+ self.$loadInstance( data );
+ });
+ },
+
/**
* Load the CKEditor Instance into an Textarea or DOMNode Element
*
- * @param {HTMLElement} Container
- * @param {Object} Editor - controls/editors/Editor
+ * @param {Object} data - Editor settings data
*/
- loadInstance : function(Container, Editor)
+ $loadInstance : function(data)
{
if ( typeof window.CKEDITOR === 'undefined' ) {
return;
}
- var self = this,
- Instance = Container;
+ var self = this,
+ Container = this.getContainer(),
+ Textarea = false,
+ size = Container.getSize();
if ( !Container.getElement( 'textarea' ) )
{
- var size = Container.getSize();
-
- Instance = new Element('textarea', {
+ Textarea = new Element('textarea', {
id : this.getId(),
styles : {
height : size.y,
- width : size.x - 20
+ width : size.x
}
}).inject( Container );
}
- if ( Instance.nodeName != 'TEXTAREA' ) {
- Instance = Instance.getElement( 'textarea' );
+ if ( !Textarea ) {
+ Textarea = Container.getElement( 'textarea' );
}
- var instance = Instance.get( 'id' );
+ var instance = Textarea.get( 'id' );
if ( window.CKEDITOR.instances[ instance ] ) {
window.CKEDITOR.instances[ instance ].destroy( true );
}
- Editor.setAttribute( 'instancename', instance );
+ self.setAttribute( 'instancename', instance );
// http://docs.ckeditor.com/#!/guide/dev_howtos_dialog_windows
window.CKEDITOR.on( 'dialogDefinition', function( ev )
@@ -105,77 +125,93 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
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 = [];
+ // parse the buttons for the ckeditor
+ var b, g, i, len, blen, glen, group, items,
+ buttonEntry, lineEntry, groupEntry;
+
+ var buttons = data.toolbar,
+ lines = buttons.lines || [],
+ toolbar = [];
- for ( i = 0, len = lines.length; i < len; i++ )
+ for ( i = 0, len = lines.length; i < len; i++ )
+ {
+ items = [];
+ lineEntry = lines[ i ];
+
+ // groups
+ for ( g = 0, glen = lineEntry.length; g < glen; g++ )
{
- items = [];
- lineEntry = lines[ i ];
+ group = [];
+ groupEntry = lineEntry[ g ];
- // groups
- for ( g = 0, glen = lineEntry.length; g < glen; g++ )
+ // buttons
+ for ( b = 0, blen = groupEntry.length; b < blen; b++ )
{
- group = [];
- groupEntry = lineEntry[ g ];
+ buttonEntry = groupEntry[ b ];
- // buttons
- for ( b = 0, blen = groupEntry.length; b < blen; b++ )
+ if ( buttonEntry.type == 'seperator' )
{
- buttonEntry = groupEntry[ b ];
-
- if ( buttonEntry.type == 'seperator' )
- {
- group.push( '-' );
- continue;
- }
-
- group.push( buttonEntry.button );
+ group.push( '-' );
+ continue;
}
- toolbar.push( group );
+ group.push( buttonEntry.button );
}
- toolbar.push( '/' );
+ toolbar.push( group );
}
- var height = Instance.getSize().y - 140,
- width = Instance.getSize().x + 20;
+ toolbar.push( '/' );
+ }
- if ( self.getAttribute( 'width' ) ) {
- width = self.getAttribute( 'width' );
- }
+ var height = size.y,
+ width = size.x;
- if ( self.getAttribute( 'height' ) ) {
- height = self.getAttribute( 'height' ) - 140;
- }
+ if ( self.getAttribute( 'width' ) ) {
+ width = self.getAttribute( 'width' );
+ }
+
+ if ( self.getAttribute( 'height' ) ) {
+ height = self.getAttribute( 'height' );
+ }
- var zIndex = QUIElements.getComputedZIndex( Container );
+ var zIndex = QUIElements.getComputedZIndex( Container );
- window.CKEDITOR.replace(instance, {
- language : Locale.getCurrent(),
- baseHref : URL_DIR,
- basePath : URL_DIR,
- height : height,
- width : width,
- toolbar : toolbar,
+ // parse styles to fckedit styles
+ var entry, styles = [];
- allowedContent : true,
- extraAllowedContent : 'div(*)[*]{*}, iframe(*)[*]{*}',
+ for ( i = 0, len = data.styles.length; i < len; i++ )
+ {
+ entry = data.styles[ i ];
- 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
+ styles.push({
+ name : entry.text,
+ element : entry.element,
+ attributes : entry.attributes
});
+ }
+
+ window.CKEDITOR.replace(instance, {
+ language : Locale.getCurrent(),
+ baseHref : URL_DIR,
+ basePath : URL_DIR,
+ height : height,
+ width : width,
+ toolbar : toolbar,
+
+ allowedContent : true,
+ extraAllowedContent : 'div(*)[*]{*}, iframe(*)[*]{*}',
+
+ stylesSet : styles,
+ contentsCss : data.cssFiles,
+ bodyClass : data.bodyClass,
+ // plugins : CKEDITOR_NEXGAM_PLUGINS,
+ // templates_files : [URL_OPT_DIR +'base/bin/pcsgEditorPlugins/templates.php'],
+ baseFloatZIndex : zIndex
+ //extraPlugins : 'panel,button,menu,floatpanel,menubutton,htmlbuttons'
});
+
},
/**
@@ -201,66 +237,13 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
delete window.CKEDITOR.instances[ Instance.name ];
- window.CKEDITOR.removeListener( 'instanceReady', this.$onInstanceReadyListener );
+ 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
@@ -274,12 +257,31 @@ define('package/quiqqer/ckeditor4/bin/Editor', [
return;
}
+ // resize the editor
+ var Container = this.getContainer(),
+ containerSize = Container.getSize();
+
+ // fckeditor resize, setHeight is sooooooooooo mysterious
+ instance.editor.resize( containerSize.x, containerSize.y );
+
this.setInstance( instance.editor );
this.fireEvent( 'loaded', [ this, instance.editor ] );
instance.editor.focus();
},
+ /**
+ * event : on resize
+ */
+ $onResize : function()
+ {
+ var Container = this.getContainer(),
+ Instance = this.getInstance(),
+ containerSize = Container.getSize();
+
+ Instance.resize( containerSize.x, containerSize.y );
+ },
+
/**
* Editor onSetContent Event
*
--
GitLab