Bildunterschriften mit dem CKE Editor (suche Anregung)

[Stefek]

Hallo,
nehmt es mir nicht übel, dass ich die "leichte Methode" wähle und als erstes nachfrage, bevor ich mich selbst auf die Suche mache.
Es kann ja sein, dass jemand von euch das bereits gemacht hat und sein wissen teilen möchte.

Ich brauche die Möglichkeit, im CKE Bilder einzufügen und diese "auf einen Schlag" bzw. in einem Durchgang, mit Bildunterschriften zu versehen.
Ich suche keine jQuery Lösung, die z.B. aus dem TITLE Attribut des Bildes den Text ausliest und ein ganzes HTML Konstrukt um das Bild herum bastelt und den Text wieder einfügt. Es sollte so sein, dass das ganze in die Datenbank gespeichert wird (das HTML gerüst) und wenn die Seite vom Server rausgegeben wird, das ganze bereits vorhanden ist und nicht browserseitig konstruiert wird.

Jemand?

Gruß,
Stefek

[gottfried]

Hallo Stefek!

auf Anhieb würde ich sagen, ich nehm die Bilder aus der z.B Foldergallery, da kann ich schön die texte pflegen und bau drunter ein droplet ein, welches mir die description zum Bild aus der datenbank holt. Natürlich müßte man das droplet jeweils mit dem Bildnamen versorgen.  

Code:

....
global $database
......
$bn=basename($image) ;    
$sql = 'SELECT * FROM ' . TABLE_PREFIX . 'mod_foldergallery_files WHERE file_name="' . $bn . '" ORDER BY position ASC;';
$query = $database->query($sql);
while ($bild = $query->fetchRow()) {
    if ($bild['file_name'] == 'folderpreview.jpg')
        continue;
    $ca = $bild['caption'];
    $caption =preg_replace("/\r\n|\n|\r/i","<br>",$ca);
    }  
return $caption
....

[Stefek]

Hallo Gottfried,

danke für die Mühen.
Aber tatsächlich ist diese Lösung nicht geeignet.
Die Bildauswahl soll, wie bisher, über den CKEditor von statten gehen.
Wenn man jetzt ein Bild im CKE auswählt, kann man da auch Titel, Alt-Text und andere Angaben machen.
Ich will dort gerne ein Feld haben, in den ich die Bildunterschrift platziere.
Ich habe mir das noch nicht weiter angeschaut.
Ich weiß, dass es mit einer Tabelle ginge, aber auch das ist keine Lösung.

Für weitere Ideen und Lösungsansätze bin ich sehr offen.

Danke Dir auf jeden Fall.

Gruß,
Stefek

[einteik]

Gibt versch. Wege.

!) In ckeditor\plugins\image\dialogs\image.js ein zus. Feld caption definieren. Ist nicht die urspr. Anforderung, aber machbar. Analog der Datei dürfte ein neues Feld kein Problem sein hinzuzufügen.

2) Ein CK-Template erstellen. In der wb_config gibt es einiges - auch dies ist selbsterklärend. Für Klasse .caption die WB-Template-CSS anpassen.

3)Eine automatische Verknüpfung zu bestehendem Datensatz herstellen per AJAX mit Schlüsselwort. Aufwendig, bei vielen Dokumenten ist aber eine alleinige Konzentration auf den WYSIWYG-Editoren zu hinterfragen. Ein "externes" WB-Modul mag mehr einmalige dafür weniger laufende Arbeit erfordern.

[NorHei]

Warum reicht es nicht die Bildunterschrift im Editor zu ändern?  Für den CKE gibt es doch sehr schöne Templates (hab die gleichen auch noch das man sie per CSS gestalten kann). Da hat man dann eine Überschrift und Unterschrift und muss die nur ersetzen bzw eine von beiden löschen. Man könnte auch ein Template mit nur einer Unterschrift machen.

[mr-fan]

Hier mal zwei "Bild Templates" für den CKE - editor.styles.js eintragen und per CSS anpassen und gut is...

Code:

title: 'Bild links mit &Uuml;berschrift',
image: 'template1.gif',
description: 'Bild links mit &Uuml;berschrift und Textumfluss.',
html:
'<h3>' +
'&Uuml;berschrift hier.'+
'</h3>' +
'<img class="picleft" src="/modules/ckeditor/ckeditor/plugins/templates/templates/images/no_image.jpg" />' +
'<p>' +
'Hier der Text' +
'</p>'+
  '<p style="clear:left;">' +
'Weiter...' +
'</p>'
},
{
title: 'Bild rechts mit &Uuml;berschrift',
image: 'template4.gif',
description: 'Bild rechts mit &Uuml;berschrift und Textumfluss.',
html:
'<h3>' +
'&Uuml;berschrift hier.'+
'</h3>' +
'<img class="picright" src="/modules/ckeditor/ckeditor/plugins/templates/templates/images/no_image.jpg" />' +
'<p>' +
'Hier der Text' +
'</p>'+
'<p style="clear:right;">' +
'Weiter...' +
'</p>'
},

Sinnvolle "Fülltexte" erleichtern den Editoren was wohin gehört...

Gruß Martin

[jacobi22]

nu muß ich mal doof fragen...
obige Vorlagen läd er mir nur, wenn ich sie in die ckeditor/wb_config/custom/editor.templates.js eintrage. Nur, wenn ich diese Datei nicht habe, läd er mir die Vorlagen aus der editor.styles.js im Template-Ordner. Dort eingetragene Styles läd er auch so.

Ist das korrekt so oder mach ich was falsch?

[Stefek]

Hallo Leute,
danke für die rege Beteiligung.

Ich werde mir den Vorschlag von Martin näher ansehen.
Das geht in die Richtung, wie ich es brauche.

So ungefähr habe ich mir das Endprodukt vorgestellt:
http://www.mediaevent.de/2004/09/html-bildunterschrift/

LG,
Stefek

[mr-fan]

nu muß ich mal doof fragen...
obige Vorlagen läd er mir nur, wenn ich sie in die ckeditor/wb_config/custom/editor.templates.js eintrage. Nur, wenn ich diese Datei nicht habe, läd er mir die Vorlagen aus der editor.styles.js im Template-Ordner. Dort eingetragene Styles läd er auch so.

Ist das korrekt so oder mach ich was falsch?

hihi..._das_ kommt ganz darauf an welche Version des CKE man hat das ist überall ein wenig anders glaube ich...gibt eine Variante mit default und custom _Ordnern_ im Modul und eine die dann alle relevanten Dateien im Template root + Ordner editor absucht...

Jo habe damit nie Probleme mit Kunden einfach Fülltext ins Markup eintragen ala "HIER 1X KLICKEN NUR BILDBESCHREIBUNG"  aber nicht vergessen zum 2ten Klicken zu animieren mit einem einfachen neuen <p> Tag ebenfalls mit Fülltext ala "HIER 1X KLICKEN UND WEITER IM TEXT" sonst bringen ein paar mal Enter das ganze Layout durcheinander und das Telefon klingelt bei dir...

Gruß Martin

[ruebenwurzel]

Hallo,

nu muß ich mal doof fragen...
obige Vorlagen läd er mir nur, wenn ich sie in die ckeditor/wb_config/custom/editor.templates.js eintrage. Nur, wenn ich diese Datei nicht habe, läd er mir die Vorlagen aus der editor.styles.js im Template-Ordner. Dort eingetragene Styles läd er auch so.

Ist das korrekt so oder mach ich was falsch?

im  wb_config Odner gibt es eine readme-faq.txt. Da steht unter anderem drinne:

Why are there different folders?

# Answer:   #

All four configuration files (wb_ckconfig.js, editor.css, editor.styles.js, editor.templates.js) are both available in
            _yourwbinstallation_/modules/ckeditor/wb_config/default
            _yourwbinstallation_/modules/ckeditor/wb_config/custom

The custom files all have the file prefix "custom.".

They are not loaded and recognized by the CKEditor module unless you remove the "custom."!
As an example in wb_config/custom:
            Change the filename "custom.editor.style s.js" with your FTP-Browser / AddonFileEditor / ... into "editor.styles.js".

It is necessary to have this custom files - you should never change the files in default folder, as they are overwritten with any update of CKEditor module and / or WebsiteBaker! If you have any problems when upgrading CKEditor module to another version and problems are occuring, just change the filename back to "custom." and then have a look at the files.

Bedeuted, dass Änderungen in den costum.... Dateien nur dann übernommen werden, wenn man das "custom" aus dem Namen rausmacht, ansonsten nimmt er immer die default.

Die Idee hinter diesen diversen Ordnern find ich ja nicht schlecht, letztendlich sorgt das aber auch bei mir mehr für Verwirrung, als dass es wirklich hilfreich ist. Ich ändere für meine Kunden lediglich immer nur die Dateien im default ordner, da weiß ich dass es geht, das custom Geraffel interessiert mich nicht.

Matthias

[jacobi22]

Die Readme hatte ich gelesen, aber keinen Zusammenhang mit meinem "Problem" gesehen, weil es dabei ja nicht um den Dateinamenszusatz "custom" geht, sondern eher darum, das ckeditor die Anweisungen ignoriert, sofern die andere Datei besteht (siehe mein Post dazu). Bin eher davon ausgegangen, das - ähnlich wie bei CSS-Anweisungen - die Einträge beider editor.styles.js berücksichtigt werden. Das macht er wohl mit den Styles anweisungen, aber nicht mit solchen Vorlagen.

Hatte vorher diese Vorlagen immer "ignoriert", wurden noch nie benötigt, darum war das Neuland. Wenn man weiß, wo man etwas eintragen muß, funktioniert es ja auch

[ruebenwurzel]

Hallo,

Wenn man weiß, wo man etwas eintragen muß, funktioniert es ja auch

  yepp.

Matthias

[mr-fan]

Hatte vorher diese Vorlagen immer "ignoriert", wurden noch nie benötigt, darum war das Neuland. Wenn man weiß, wo man etwas eintragen muß, funktioniert es ja auch

ts ts ts - diese Vorlagen sind eines der besten Funktionen am CKE und zusammen mit den Styles die man sich ins Dropdown stellen kann und so direkt CSS Klassen zuweisen (z.B. Klicke auf Bild -> klicke auf "Stile" und wähle links/rechts/mittig/mit oder ohne CSS Rahmen)

-ohne diese Funktionen würde ich den TinyMCE dem CKE vorziehen...aber so ist der CKE die erste Wahl.

Mit den Vorlagen macht man es dem Benutzer sehr leicht einen "sauberen" Content zu bekommen. Wenn Inhaltsteile mehr als 2-3 mal vorkommen wird daraus sofort ein CKE Template...im Threat gibt es einige gute Beispiele auch zum download...aber die die schon dabei sind sprechen eh für sich bloß mit den Hochkommas aufpassen sonst geht gar nichts!

ändere für meine Kunden lediglich immer nur die Dateien im default ordner, da weiß ich dass es geht, das custom Geraffel interessiert mich nicht.

entweder so oder man legt sich im Template Ordner /editor/ an klappt auch einwandfrei...

Gruß Martin

[gottfried]

Waldschwein/Aldus/Stefek

[gottfried]

Pardon! 
Wenn ich das thread summa summarum betrachte, gibt es anscheinend Möglichkeite im CKE Editor mit Vorlagen
zu arbeiten. So richtig schlau geworden bin ich aus dem thread nun nicht, Wo kuck ich denn da am besten nach? 

[jacobi22]

Pardon! 
Wenn ich das thread summa summarum betrachte, gibt es anscheinend Möglichkeite im CKE Editor mit Vorlagen
zu arbeiten. So richtig schlau geworden bin ich aus dem thread nun nicht, Wo kuck ich denn da am besten nach? 

Der CKEditor bietet die relativ einfache Möglichkeit, über die Vorlagenauswahl ein vorgefertigtes HMTL-Konstrukt für vorher festgelegte oder eigene Content-Designs oder auch nur Teile davon in die jeweilige Page einzufügen. Im CKEditor erreichst du diese Auswahl über den Button Vorlagen, links neben Quelltext.
Nun gibt es innerhalb des ckeditor-Ordner verschiedene Dateien, in denen die bestehenden Vorlagen festgelegt sind,die hier wichtigen heißen editor.template.js und editor.style.js (Ablageort z.b. modules/ckeditor/wb_confi/default/, möglich wäre auch der Ordner deines aktuellen Templates.) Da es mehrere Varianten gibt, macht das jeder auch etwas anders. Ich habe verschiedene Vorlagen, die ich in der "Grundausstattung von WB haben möchte, darum kommen sie in o.g. Ordner meines FTP-Paketes. Andere, kundenspezifische Vorlagen und Styles kommen in den Template-Ordner, weil nur dieser Kunde diese Einstellung benötigt.

Eine Variante für Styles (das bekannte "Red Title"") in editor.styles.js

Code:

CKEDITOR.addStylesSet( 'wb',
[ { name : 'Red Title'        , element : 'h3', styles : { 'color' : 'Red' } }
]);

Beispiel für eine Vorlage: siehe oben.

(Wie gesagt, hab das gestern zum ersten Mal angeschaut und hoffe mal, das die Erklärung so weit passt). Mehr Infos gibs im Thread zum CKEditor

[Stefek]

Waldschwein/Aldus/Stefek

Ich weiß nicht genau, was die Frage ist. Mein "Beitrag" zu dem WB-Modul war ein wenig Kosmetik im Bereich des Bilduploads.

[gottfried]

@Stefek - danke für die Antwort. Ich hielt den thread fast für eine didaktische Auseinandersetzung des speziellen Templatefähigkeit des cke editors. 

Das eingebaute " Bild mit Überschrift und Untertitel" verspricht ja anderes als dann kommt, aber in dem editor.template.js kann man sich das ja hinbasteln, wie man das braucht, mit Platzhaltertexten u.s.w.
Gut zu wissen. Es war schon immer mein Problem verschiedene Backendnutzer zu einer gewissen Disziplin bei der Gestaltung ihrer z.B vitas zu bewegen, bzw. können die halt kein HTML. 

[Luisehahne]

Hallo,

ich denke es ist besser dies nicht über die editor.template.js umzusetzen, sondern dafür ein Plugin mit diversen Einstellmöglichkeiten zu erstellen.

Nur sind meine Javascript Kenntnisse bescheiden. Ich schau mal was ich machen kann.

Demnächst gibt es den CKEditor in der Coreversion 3.6.2  zum testen. Muss da noch ein paar Dinge selber checken, wegen unterschiedlichen Hostingpaketen, die Probleme machen.

Dann wäre es auch möglich über den WYSIWYG Admin Gruppenbezogene Einstellungen vorzunehmen. Nicht nur Breite, Höhe und Toolbar.

Dietmar

[mr-fan]

Hallo,
ich denke es ist besser dies nicht über die editor.template.js umzusetzen, sondern dafür ein Plugin mit diversen Einstellmöglichkeiten zu erstellen.
Nur sind meine Javascript Kenntnisse bescheiden. Ich schau mal was ich machen kann.
Dietmar

eigentlich unnötig solange es Module wie Members gibt...

...den wenn eine einfache HTML Vorlage nicht funktioniert....dan n gibt es ein umbenanntes und voreingestelltes Membersmodul!

Einfach die Felder für die Inhalt gebrauchen und in der Schleife in beliebige HTML Formate bringen...kann man sogar per Droplet (fieldcheck im Forum suchen) testen ob das Feld leer ist um "leere Tags" zu vermeiden...

dann hat man 100% validen Output.

Mache ich aber nur für "Items" die öfters als 3-5 mal auftreten, öfters mal geändert werden, oder nur auf einer Seite/Section auftreten...und für alles was quer über die Webseite verstreut ist muss eine "Vorlage" reichen.

alles andere für simplen HTML Output (also ganzes Plugin programmieren) wäre ein wenig overhead? Oder nicht

Gruß Martin