Skip to content
Code-Schnipsel Gruppen Projekte
Commit 5753c97c erstellt von Henning Leutz's avatar Henning Leutz :martial_arts_uniform:
Dateien durchsuchen

new editor class api

Übergeordneter 312bac64
No related branches found
No related tags found
Keine zugehörigen Merge Requests gefunden
Leerzeichenänderungen ausblenden
Inline Nebeneinander
bin/Editor.css
+ 42
− 31
Zeige Datei @ 5753c97c
@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;*/
/*}*/
bin/Editor.js
+ 130
− 128
Zeige Datei @ 5753c97c
......@@ -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
*
......
0% oder .
You are about to add 0 people to the discussion. Proceed with caution.
Bearbeitung dieser Nachricht zuerst beenden!
Bitte registrieren oder zum Kommentieren

PCSG & QUIQQER support and DEV System - GitLab