Im Folgenden soll anhand eines kleinen Beispiels gezeigt werden, wie man ein Plugin für den CKEditor schreibt und dieses einbindet. Es soll ein Button in die Toolbar aufgenommen werden. Ein Klick auf diesen Button soll einen Dialog öffnen. In diesem Dialog wird man einen Text eingeben und eine Schriftfarbe für diesen Text auswählen können. Beim Klick auf den Ok-Button des Dialogs, wird dann der entsprechende Text in der gewählten Schriftfarbe in den Editierbereich eingefügt.
Zunächst benötigt man eine eigene Konfigurationsdatei “config.js”, um die Toolbar anzupassen.
CKEDITOR.editorConfig = function( config ) { CKEDITOR.plugins.addExternal( 'insertText', CKEDITOR.basePath + '../ckeditor_customized/plugins/InsertText/' ); config.extraPlugins = "insertText"; CKEDITOR.config.toolbar = 'MyToolbar'; config.toolbar_MyToolbar = [ ['NewPage','insertText'], ]; }; |
MyToolbar enthält lediglich 2 Buttons. Zum einen enthält sie den NewPage-Button, hinter dem sich ein bereits mit dem CKEditor-Source mitgeliefertes Plugin versteckt. Und zum anderen enthält sie den neuen Button. Für diesen legen wir das Verzeichnis “x/ckeditor_customized/plugins/InsertText/” an, wobei x für das Verzeichnis steht, in dem sich auch das CKEditor-Verzeichnis befindet. In das angelegte Verzeichnis fügen wir nun die Datei “plugin.js” ein, die folgenden Code enthält:
CKEDITOR.plugins.add('insertText', { init : function( editor ) { editor.addCommand( 'insertTextDlg', new CKEDITOR.dialogCommand( 'insertTextDlg' ) ); editor.ui.addButton( 'insertText', { label : 'Text einfügen', command : 'insertTextDlg', icon: <icon path> }); CKEDITOR.dialog.add( 'insertTextDlg', CKEDITOR.basePath + '../ckeditor_customized/dialogs/insertTextDlg.js'); } }); |
Zunächst fügen wir in dem Plugin der Editor-Instanz ein neues Dialog-Kommando namens insertTextDlg hinzu, welches bei Klick auf den neuen Button ausgeführt werden soll. Anschließend registrieren wir den neuen Dialog, der sich beim Button-Klick öffnen soll. Der Dialog wird in der Datei “insertTextDlg.js” definiert.
CKEDITOR.dialog.add( 'insertTextDlg', function( editor ) { return { title: 'Text einfügen', minWidth: 200, minHeight: 80, contents: [ { id: 'tab1', label: 'Tab1', title: 'Tab1', elements : [ { id: 'mytext', type: 'text', label: "Text", validate : function() { // potentielle Validierungen if (this.getValue() == "") { alert("Das Feld darf nicht leer sein!"); } return this.getValue() != ""; } }, { id: 'mycolor', type: 'select', label: "Farbe", items: [ ['rot'], ['grün'], ['blau'] ], validate : function() { // Validierungen return true; } }, ] } ], onOk: function() { var color = this.getContentElement('tab1', 'mycolor').getValue(); var numColor; if (color == 'rot') numColor = '#F00'; else if (color == 'grün') numColor = '#0F0'; else if (color == 'blau') numColor = '#00F'; var element = CKEDITOR.dom.element.createFromHtml( '<span style="color:' + numColor + ';">' + this.getContentElement('tab1', 'mytext').getValue() + '</span>'); editor.insertElement(element); } }; } ); |
Bei einem Klick auf Ok, werden die selektierten und eingegebenen Werte ermittelt. Nun kann der eingegebene Text in der gewünschten Farbe eingefügt werden.
