CKEditor Addon für REDAXO

[RexDude]

Sind mit diesem Eintrag noch mehr Einstellungen möglich?

ja klar alles was man in die config.js reinpacken kann, kann man auch hier reinpacken. Man muss nur anstelle "=" ein ":" verwenden. und auch einen evtl. strichpunkt weglassen.

ich denke mal mit "removeButtons" kann man einzelne Buttons ausblenden. Finde ich irgendwo eine Liste wie die Bezeichnung der einzelnen lautet? ..hab leider bisher auf der Website vom CKEditor nichts gefunden.

Schau nochmal hier für eine Liste: https://github.com/RexDude/ckeditor/blo ... /config.js Habe die Buttons glaube ich geraten, die ich da entfernt haben wollt.Müsste aber sicherlich irgendwo stehen in den Dokus vom CKE.

Und kann man die Auswahlmenues "Stil" und "Format" irgendwo anpassen? ..und somit auch eigene Klassen einbinden oder weitere Überschriften?

Ich habe mal im Auswahlmenü Stil 2 Styles hinzugefügt. Hatte dazu die https://github.com/RexDude/ckeditor/blo ... /styles.js und die https://github.com/RexDude/ckeditor/blo ... ntents.css angepasst (aber halt die im files Ordner von REDAXO, nicht im Addon Folder!).

styles.js:

Code: Alles auswählen

CKEDITOR.stylesSet.add( 'default', [
	{ name: 'Grün',			element: 'span', attributes: { 'class': 'green' } },
	{ name: 'Blau',			element: 'span', attributes: { 'class': 'blue' } }
]);

contens.css (dazugepackt):

Code: Alles auswählen

.green {
    color: #729e1d;
}

.blue {
    color: #0062a1;
}

Musste aber den Browser Cache komplett löschen, sonst wurde die CSS Datei nicht aktualisiert.

Dann habe ich noch das Problem dass sich die Breite des Editors nicht einstellen lässt

Code: Alles auswählen

CKEDITOR.replace( 'ckeditor', {
   removeButtons: "",
   uiColor: "#9AB8F3",
   width: 200
});

Komma nach letzen Parameter weglassen nicht vergessen (also nicht width: 200,).

[RexDude]

Hier sind noch alle Config-Optionen zu finden: http://docs.ckeditor.com/#!/api/CKEDITOR.config
Da ist dann auch width dabei CKEditor nimmt übrigens die volle Breite ein, wenn der Wert nicht gesetzt ist, soweit ich weiss.

[RexDude]

Ach und so ist es anscheiend auch direkt im Modul möglich die Styles hinzuzufügen:
http://stackoverflow.com/a/6461860

[webghost]

das ist super - vielen Dank

somit wird der Editor bei mir gleich Standart. ist echt praktisch wenn man das alles gleich in den Modulen einstellen kann. da braucht man auch keine Profile mehr

[RexDude]

Juhu, ein Sternchen

[webghost]

aber klar doch, hätte auch mehr Sterne gegeben aber geht ja nur einer

ich hab jetzt mal ein Modul gemacht, es ist für den einleitenden Text einer HTML5 Website
Eingabe:

Code: Alles auswählen

<h4>Artikel Header</h4>
<p>Einleitender Text zum Artikel. Immer an erster stelle und nur einmal verwenden.</p>
<p>Überschrift wird automatisch eingebunden aus SEO->Titel</p>

<h5>Text</h5>

<?php

if (OOAddon::isAvailable("ckeditor")) {
    if ($REX['ADDON']['ckeditor']['settings']['lazy_load']) {
        // lazy load ckeditor files
        echo rex_ckeditor_utils::getHtml();
    }
    ?> 

<textarea name="VALUE[1]" id="ckeditor" class="ckeditor" style="display: none;">REX_VALUE[1]</textarea>

    <script type="text/javascript">
        jQuery(document).ready(function($) {


            /************************************************
             * ##### ANPASSUNGEN BEGINN #####
             */
            
            //Anpassungen für Editor hier möglich - mehr auf http://docs.ckeditor.com/#!/api/CKEDITOR.config
            CKEDITOR.replace('ckeditor', {
                removeButtons: "Format,Image,Flash,Table", //Buttons die enfernt werden sollen
                uiColor: "#ff0000", //Farbe des Editors
                width: 600, //Breite des Editors
                stylesSet: 'my_style', //Name des Style - weiter unten - CKEDITOR.stylesSet.add( 'my_style'
                contentsCss : './_myLayout/css/div.css'
            });

            // Stil - alles was zur Auswahl stehen soll
            CKEDITOR.stylesSet.add('my_style', [
                // Block-level styles
                {name: 'Überschrift 3 rot', element: 'h3', styles: {'color': 'Red'}},
                {name: 'Überschrift 4 rot', element: 'h4', styles: {'color': 'Red'}},
                {name: 'Absatz rot', element: 'p', styles: {'color': 'Red'}},
                // Inline styles
                {name: 'Button', element: 'a', attributes: {'class': 'button'}}
            ]);

            /*
             * ##### ENDE #####
             ************************************************/


            $('#REX_FORM').submit(function() {
                // strip empty paragraphs out if there are any, can also be done via php in output module
                var data = CKEDITOR.instances.ckeditor.getData();
                var doDataUpdate = false;

                if (data.indexOf("&nbsp;") != -1) {
                    // replace &nbsp;
                    data = data.replace(/&nbsp;/g, "");
                    doDataUpdate = true;
                }

                if (data.indexOf("<br />\n<br />") != -1 || data.indexOf("<br />\\n<br />") != -1 || data.indexOf("<br /><br />") != -1) {
                    // replace multiple <br>s with a single one
                    data = data.replace(/(<br\s*\/?>\s*)+/igm, "<br />\n");
                    doDataUpdate = true;
                }

                if (data.match(/(<(?!br)(\w)[^>]*>)(\s*<br\s*\/?>\s*)+/igm)) {
                    // replace leading <br>s
                    data = data.replace(/(<(?!br)(\w)[^>]*>)(\s*<br\s*\/?>\s*)+/igm, '$1');
                    doDataUpdate = true;
                }

                if (data.match(/(\s*<br\s*\/?>\s*)+(<\/(?!br)(\w)>)/igm)) {
                    // replace trailing <br>s
                    data = data.replace(/(\s*<br\s*\/?>\s*)+(<\/(?!br)(\w)>)/igm, '$2');
                    doDataUpdate = true;
                }

                if (data.match(/(<p>(\s|&nbsp;|<br\s*\/?>)*<\/p>)/igm)) {
                    // replace empty paragraphs
                    data = data.replace(/(<p>(\s|&nbsp;|<br\s*\/?>)*<\/p>)/igm, '');
                    doDataUpdate = true;
                }

                if (doDataUpdate) {
                    CKEDITOR.instances.ckeditor.setData(data);
                }

                return true;
            });
        });
    </script>

    <?php

} else {
    echo rex_warning('Dieses Modul ben&ouml;tigt das CKEditor Addon!');
}
?>

Ausgabe:

Code: Alles auswählen

<?php
if (REX_IS_VALUE[1]) {
    
	include_once $REX['HTDOCS_PATH'].'/_myCode/seo42/seo42_extends.class.php';

    print '<header class="article_header">';

    print "<h1>".seo42_ex::getTitle()."</h1>"; 

    print 'REX_HTML_VALUE[1]</header>';

}
?>

Was das Ausblenden der Buttons betrifft habe ich hier noch etwas gefunden http://docs.cksource.com/ckeditor_api/s ... l#.toolbar
Wäre wohl noch eine praktische Lösung da alle Buttons der Toolbar gruppiert sind. Nur passiert einfach nichts wenn ich das ins Modul schreibe. Hasst Du eine Idee?

Dann suche ich noch eine Möglichkeit css-Formatierungen für die Editorausgabe direkt im Modul einzugeben, als Ergänzung zur content.css. Ich hab ja als Content.css einfach die css aus dem Frontend eingebunden. Jetzt ist aber die HTML Struktur nicht die selbe, bzw. es fehlt ja was drum rum. Im Frontend wird der Header-Text immer Fett ausgegeben. Im Modul nicht da das umschliessende Header-Tag fehlt. Daher möchte ich da einfach noch ein - p {font-weight:bold;} eingeben können. Fällt Dir da zu etwas ein?

eine Möglichkeit hab ich gefunden: über contentsCss eine zusätzliche Datei einbinden

Code: Alles auswählen

config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

ist aber blöd wenn man nur eine kleine korrektur hat, dann eine ganze Datei erstellen zu müssen

[RexDude]

aber klar doch, hätte auch mehr Sterne gegeben aber geht ja nur einer

ja, schade eigentlich

ich hab jetzt mal ein Modul gemacht, es ist für den einleitenden Text einer HTML5 Website

nicht schlecht sogar die getTitle() von seo42 methode angeleitet in der ausgabe

Was das Ausblenden der Buttons betrifft habe ich hier noch etwas gefunden http://docs.cksource.com/ckeditor_api/s ... l#.toolbar
Wäre wohl noch eine praktische Lösung da alle Buttons der Toolbar gruppiert sind. Nur passiert einfach nichts wenn ich das ins Modul schreibe. Hasst Du eine Idee?

Du bist da bei CKEditor 3 gelandet. Keine Ahnung ob das auch für 4 gilt. Vermutlich nicht

Dann suche ich noch eine Möglichkeit css-Formatierungen für die Editorausgabe direkt im Modul einzugeben, als Ergänzung zur content.css. Ich hab ja als Content.css einfach die css aus dem Frontend eingebunden. Jetzt ist aber die HTML Struktur nicht die selbe, bzw. es fehlt ja was drum rum. Im Frontend wird der Header-Text immer Fett ausgegeben. Im Modul nicht da das umschliessende Header-Tag fehlt. Daher möchte ich da einfach noch ein - p {font-weight:bold;} eingeben können. Fällt Dir da zu etwas ein?

Ihc würde nicht die aus dem Frontend nehmen. Da zuerhackts dir doch unter Umsänden dein Backend. Bau dir am Besten eine angepasst speziell fürs Backend.

eine Möglichkeit hab ich gefunden: über contentsCss eine zusätzliche Datei einbinden

cool ich glaub ich werd dem addon dann mal doch auch so ein netten profil editor spendieren, inkl. einem machnismus um sein css zeug unter zu bringen. das tiny addon hat es doch ganz gut gelöst finde ich

ist aber blöd wenn man nur eine kleine korrektur hat, dann eine ganze Datei erstellen zu müssen

ist doch wurscht habe auch nix gefunden ohne css dateien dem editor bekannt zu geben.

[RexDude]

Seine Toolbars kann man aber ganz einfach per toolbarGroups und dann removeButtons anpassen. Ist eigentlich ganz komfortabel und verständlich.

[webghost]

nicht schlecht sogar die getTitle() von seo42 methode angeleitet in der ausgabe

Wenn dann gleich richtig

Du bist da bei CKEditor 3 gelandet. Keine Ahnung ob das auch für 4 gilt. Vermutlich nicht

uups ... habs aber jetzt auch damit versucht http://docs.ckeditor.com/#!/api/CKEDITO ... fg-toolbar aber egal was ich davon ins Modul setze, es gibt immer einen JavaScript-Fehler: ReferenceError: config is not defined. Verstehe noch nicht wie ich es dann schreiben muss oder wohin.

Ihc würde nicht die aus dem Frontend nehmen. Da zuerhackts dir doch unter Umsänden dein Backend. Bau dir am Besten eine angepasst speziell fürs Backend.

Im Quelltext von Backend ist die Einbindung nicht zu sehen. Ich denke die wird mit js eingebunden und betrifft somit nur den Editor. Hoffe ich irre da nicht, aber ich konnte auch keine Veränderung im Backend sehen, und ich hab einige Tags direkt formatiert.
Somit wäre eine Möglichkeit css direkt einzubinden doch noch praktisch

cool ich glaub ich werd dem addon dann mal doch auch so ein netten profil editor spendieren, inkl. einem machnismus um sein css zeug unter zu bringen. das tiny addon hat es doch ganz gut gelöst finde ich

Das wär super, vor allem mit der css, dann wär das auch gleich gelöst. Machs einfach nicht so wie beim Tiny, hab da mal ein Update gemacht dann waren die Profile weg und die css auch. Es hätte ja auch gereicht die Default-Profile zu überschreiben, die ID ist dem Entwickler ja bekannt.

ist doch wurscht habe auch nix gefunden ohne dateien css dem editor bekannt zu geben.

Dann halt erst mal so

Seine Toolbars kann man aber ganz einfach per toolbarGroups und dann removeButtons anpassen. Ist eigentlich ganz komfortabel und verständlich.

Genau das bekomme ich eben nicht hin, ist aber bestimmt nur ein kleiner Fehler den ich machen. Das zum beispiel so ins Modul schreiben gibt einen javascriptfehler

Code: Alles auswählen

// Default setting.
config.toolbarGroups = [
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
];

[RexDude]

config. weg,
"=" in ":",
und strichpunkt weg (evtl mit komma ersetzen, wenn danach noch ein eintrag kommt es also nicht der letzte eintrag ist). damit sollte auch dein reference error nicht mehr kommen.

Code: Alles auswählen

toolbarGroups: [
    { name: 'document',    groups: [ 'mode', 'document', 'doctools' ] },
    { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
    { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
    { name: 'forms' },
    '/',
    { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
    { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
    { name: 'links' },
    { name: 'insert' },
    '/',
    { name: 'styles' },
    { name: 'colors' },
    { name: 'tools' },
    { name: 'others' },
    { name: 'about' }
]

[webghost]

ach, ich und javascript - das lerne ich nie

danke Dir

[RexDude]

bitte. schön das es geklappt hat die 4.3 wird übrigens ein paar nette neue features enthalten. u.a. ein widget system mit dem man z.b. vorgefertigte templates innerhalb des editors setzen kann. http://docs.ckeditor.com/guides/widget_ ... ample1.png

http://ckeditor.com/blog/CKEditor-4.3-Beta-Released

[webghost]

das mit den widgets sieht interessant aus, damit lässt sich einiges gut umsetzen vor allem mit html5

dann willst Du die nächste Version mit Profilen umsetzen?

Nur mal so als Idee - wie wärs mit einem Modulkonfigurator, an Stelle von Profielen, womit man im Addon selbst Module generieren kann. Z.B. man gibt Werte an wie Höhe, Breite, Farbe, aber auch css-files, integrierte Styles und Formate. Aus diesen Variablen wird dann das Modul generiert. Profile sind ja gut, nur (jedenfalls so wie ich das verwende) ist es nicht nötig die Angaben noch separat in die Datenbank zu speichern, es würde ausreichen alles direkt im Modul zu speichern, weil ich jedes Profil eh nur einmal verwende ...wie gesagt, nur mal so ein Gedanke

[RexDude]

hey danke. wollte dir eh schon vorschlagen ob du mich nicht unterstützen kannst mit deiner erfahrung auch was die tiny profile angeht. und tester bräuchte es dann ja auch ich würde da einfach nochmal auf dich zurückkommen wenn es soweit ist.

der modul generator ist sicherlich auch ein interessanter lösungsansatz, hat aber den nachteil, dass wenn du dann doch was geändert haben willst du den generator quasi neu anschmeissen musst. aber wir bequatschen das alles wenn es soweit ist würd ich sagen. bis dahin viel spaß mit der bestehenden version...

[webghost]

ich kann gerne etwas mithelfen kein Problem ..sag einfach bescheid

der modul generator ist sicherlich auch ein interessanter lösungsansatz, hat aber den nachteil, dass wenn du dann doch was geändert haben willst du den generator quasi neu anschmeissen musst

vielleicht könnte man das Modul auch erneut in den Generator einlesen um Änderungen zu machen, wird halt schon wieder kniffliger ..aber ja, mal sehen..

[webghost]

ich hab mal ein paar Beispielmodule eingestellt die einige Konfigurations-Möglichkeiten aufzeigen

CKEditor-Konfigurations-Modul HTML5 Artikel Header
CKEditor-Konfigurations-Modul HTML5 Artikel Section
CKEditor-Konfigurations-Modul HTML5 Artikel Footer

Hier noch eine Liste der Namen der Buttons. Die Liste bezieht sich auf die volle Version, sind also auch namen drin die in der aktuellen Addon-Version nicht enthalten sind.

Source = Quellcode
Save
NewPage
DocProps
Preview
Print
Templates
document

Cut = ausschneiden
Copy = kopieren
Paste = einfügen
PasteText = Text einfügen
PasteFromWord = formatierter Text einfügen
Undo
Redo

Find
Replace
SelectAll
Scayt

Form
Checkbox
Radio
TextField
Textarea
Select
Button
ImageButton
HiddenField

Bold = fett
Italic = kursiv
Underline = unterstrichen
Strike = durchstrichen
Subscript = tiefgestellt
Superscript = hochgestellt
RemoveFormat = Formatierung entfernen

NumberedList = nummerierte Liste
BulletedList = unsortierte Liste
Outdent = ausrücken
Indent = einrücken
Blockquote = Zitat
CreateDiv
JustifyLeft = links ausrichten
JustifyCenter = mittig ausrichten
JustifyRight = rechts ausrichten
JustifyBlock
BidiLtr = Schreibrichtung links nach rechts
BidiRtl = Schreibrichtung rechts nach links

Link = Link einfügen
Unlink = Link entfernen
Anchor = Anker

CreatePlaceholder
Image = Bild einfügen
Flash = Flash einfügen
Table = Tabelle einfügen
HorizontalRule = Trennlinie
Smiley
SpecialChar
PageBreak
Iframe
InsertPre

Styles = Styles einfügen
Format = Formate einfügen
Font
FontSize

TextColor = Textfarbe
BGColor = Hintergrundfarbe

UIColor = Farbe des Editors
Maximize = Vollbild
ShowBlocks

button1
button2
button3
oembed
MediaEmbed

About

[RexDude]

Klasse Einsatz! Vielen Dank!
Die Button-Liste wird sicherlich in der zukünfigen Hilfe-Section des Addons landen

[ralf.schlott]

Ich freue mich, dass ihr am Wochenende sowas geniales zusammengestellt habt. Das muss ich mir in der Praxis jetzt mal ansehen.
Vielen Dank dafür!

[webghost]

ich versuch gerade 2 Editoren in einem Modul zu laden. Geht um eine Mischung zwischen ein- und zwei-spaltigem Inhalt.
@RexDude - kannst Du mir da auf die Sprünge helfen, bisher zeigt es mir immer nur einen Editor an.

[RexDude]

Code: Alles auswählen

<textarea name="VALUE[2]" id="ckeditor2" class="ckeditor" style="display: none;">REX_VALUE[2]</textarea>

Code: Alles auswählen

CKEDITOR.replace('ckeditor2', { ... });

und diese Zeile (bzw. vermutlich den ganzen Submit Block) musst du theoretisch auch noch Anpassen damit diese für beide Editoren gilt, weiss aber nicht genau wie:

Code: Alles auswählen

var data = CKEDITOR.instances.ckeditor.getData();

Ich glaube instances ist ein Array...

[webghost]

Code: Alles auswählen

CKEDITOR.replace('ckeditor2', { ... });

die 2 hat gefehlt, jetzt klappts

und diese Zeile (bzw. vermutlich den ganzen Submit Block) musst du theoretisch auch noch Anpassen damit diese für beide Editoren gilt, weiss aber nicht genau wie:

Code: Alles auswählen

var data = CKEDITOR.instances.ckeditor.getData();

das wär noch interessant, muss ich aber dann später mal anschauen, zur Zeit brauche ich eh unterschiedliche Editoren

danke Dir

[RexDude]

das wär noch interessant, muss ich aber dann später mal anschauen, zur Zeit brauche ich eh unterschiedliche Editoren

Das ganze wäre eh am Besten in einem CKEditor Plugin untergebracht denke ich...vielleicht kriege ich das ja irgendwann mal hin.

danke Dir

Bitteschön

[webghost]

Mir ist da gerade was aufgefallen. Wenn ich im Editor eine Telefonnummer mit tel: verlinken will gibt es einen Fehler in php
also folgendes

Code: Alles auswählen

<a href="tel:0000000000">0000 000 000</a>

ergibt:

Code: Alles auswählen

Parse error: syntax error, unexpected T_STRING in /PFAD/redaxo/include/classes/class.rex_article.inc.php(133) : eval()'d code on line 140

und zwar an jeder Stelle wo ein ctype im Template eingebunden wird.

Der Fehler bezieht sich auf die Redaxo-Klasse, passiert aber nur im Editor
hast Du eine Idee wie der Fehler zustande kommt?

[RexDude]

Machst du noch irgendwas im Modul mit der Ausgabe vom Ckeditor? Probier mal das mitgelieferte Modul, obs damit auch is...

[webghost]

autsch, war mein Modul - hab REX_HTML_VALUE[1] mit print ausgegeben

sorry, und danke

verstehe aber trotzdem nicht wieso gerade dadurch der Fehler passiert