Frontend Editor

Hallo zusammen,

nach einigem Gefrickel und Workarounds suche ich nun breitflächig Hilfe.
Im Grunde sind mir nun mehrere Wege zum erstellen von Content aus dem FE bekannt.
Da ich häufig und auch gerne mit dem Katalog- und dem EFG Modul arbeite, ergeben sich folgende Möglichkeiten:

1. Formular Generator:
- Speichern neuer Datensätze in bestehende DB Tabellen durch Vergabe der Tabellenspaltennamen im Formular.
- auch im Katalog nutzbar, zur späteren Administration im BE (pids müssen allerdings per js reingefakt werden)

2. Erweiteter Formular Generator (EFG)
- Speichern neuer Daten in eine EFG eigene Tabelle im Backend.
- Administrierbar, Verknüpfungen zum Katalog nur von Seiten des Katalogs aus
- Vorteil durch diverse Emailbenachichtigungen

3. News-Archive
- klassischer Workaround für Blog-like Seiten
- vorbereitete Newsadministration im BE

Des weiteren ist es möglich den Editor ins FE zu würgen, indem man die js lädt und in den config-Zeilen die entsprechende Textarea zuweist.

O.g. Varianten funktionieren _alle_ erfahrungsgemäß nunmehr in einem halben Dutzend abgeschlossener Projekte.

Soweit so gut. Mein Problem ist nun aber diese (und auch vorher erstellte) Datensätze im FE bearbeitbar zu machen.
Ein Ansatz war die Daten per Katalog-Liste in einem Ausgabetemplate für js bereitzustellen, um sie in einem Formular (1. oder ggf. 2.) dem System (der Tabelle) zurückzuführen. Da dies aller Wahrscheinlichkeit nach aber eher via INSERT statt UPDATE (WHERE id=...) geschieht stehe ich nun wieder am Anfang.

Falls nun jemand meine Liste durch weitere Ideen erweitern kann, seht das als "FE-bearbeitungs-hilfethread", ansonsten spiele ich mit dem Gedanken mich mit der TL Modulentwicklung auseinanderzusetzen;
Ein Modul mit Auswahl der entsprechenden Tabelle im BE (und weiter bestimmter Spalten dieser), um in einem Template das Formular im FE anbieten zu können.

Falls jmnd. merkt das er helfen will und kann freue ich mich über jede Hilfe.
Die Erweiterung scheint ja grundlegend eher nicht zu komplex zu sein (:eek:), in vielen Tutorials bemerkte ich aber, dass ich scheinbar eher im DCA zu tun haben werde, welches man doch eigtl. vor der Entwicklung mit entsprechenden Vorbereitungen festlegt?!

Danke für jede Hilfe (oder weiteren Ansätzen zur FE Bearbeitung)!

Hallo david enke,
ich machs mal kurz, da ich da schon öfter drüber geschrieben habe:
der Catalog hat bald eine FE-Editing Funktion mit drinn.

Hier gibts etwas mehr zu lesen -> http://code.google.com/p/typolight-catalog/

Dauert noch was bis das wirklich fertig ist....

Viele Grüße

Zitat:

---

Da dies aller Wahrscheinlichkeit nach aber eher via INSERT statt UPDATE (WHERE id=...) geschieht stehe ich nun wieder am Anfang.

---

Ich habe ein Ticket dazu eröffnet vor ein paar Tagen. Wurde akzeptiert aber noch nicht in eine Version aufgenommen: http://https://contao.org/issues/show/925

Zitat:

---

Des weiteren ist es möglich den Editor ins FE zu würgen, indem man die js lädt und in den config-Zeilen die entsprechende Textarea zuweist.

---

Könntest du, oder jemand anders, mir das genauer erklären, wie man den Editor ins Frontend bekommt? Brauche es gerade dringend.

Zitat:

---

Zitat von Dani

Könntest du, oder jemand anders, mir das genauer erklären, wie man den Editor ins Frontend bekommt? Brauche es gerade dringend.

---

Füge einfach den aus dem BE bekannten <script> block im FE ein, dort gibt es unter anderem eine Option die nach der klasse/id der textarea, welche zu editieren ist, fragt. Falls du dort deine aus dem FG stammende Textarea klasse/id einträgst läuft die FE-Bearbeitung tadellos; das bearbeitete Textarea-Feld wird dann mit dem FG bearbeitet.

Nochmal im Detail:

Im FG vor allen Feldern muss die js geladen und konfiguriert werden:
http://lh4.ggpht.com/_BqH1NskMNgU/St...2010.21.45.png
Im HTML Feld kommt wie o.g. folgender Code:

Code:

---

<script type="text/javascript" src="{{env::url}}/plugins/tinyMCE/tiny_mce_gzip.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
tinyMCE_GZ.init({
  plugins : "advimage,autosave,contextmenu,directionality,emotions,inlinepopups,paste,safari,save,searchreplace,spellchecker,style,table,template,typolinks,xhtmlxtras",
  themes : "advanced",
  languages : "{{iflng::de}}de{{iflng}}{{iflng::en}}en{{iflng}}",
  disk_cache : false,
  debug : true
});
//-->
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
tinyMCE.init({
  mode : "exact",
  height : "300",
  language : "{{iflng::de}}de{{iflng}}{{iflng::en}}en{{iflng}}",
  elements : "ctrl_290",
  remove_linebreaks : false,
  force_hex_style_colors : true,
  fix_list_elements : true,
  fix_table_elements : true,
  theme_advanced_font_sizes : "9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px",
  doctype : '',
  document_base_url : "{{env::url}}/{{env::request}}",
  entities : "160,nbsp,60,lt,62,gt",
  cleanup_on_startup : true,
  save_enablewhendirty : true,
  save_on_tinymce_forms : true,
  save_callback : "TinyCallback.cleanXHTML",
  advimage_update_dimensions_onchange : false,
  external_image_list_url : "/plugins/tinyMCE/plugins/typolinks/typoimages.php",
  template_external_list_url : "/plugins/tinyMCE/plugins/typolinks/typotemplates.php",
  plugins : "advimage,autosave,contextmenu,directionality,emotions,inlinepopups,paste,safari,save,searchreplace,spellchecker,style,table,template,typolinks,xhtmlxtras",
  spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv",
  content_css : "/basic.css,/system/themes/tinymce.css",
  event_elements : "a,div,h1,h2,h3,h4,h5,h6,img,p,span",
  extended_valid_elements : "q[cite|class|title]",
  tab_focus : ":prev,:next",
  theme : "advanced",
  theme_advanced_resizing : true,
  theme_advanced_resize_horizontal : false,
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_source_editor_width : "500",
  theme_advanced_blockformats : "div,p,address,pre,h1,h2,h3,h4,h5,h6",
  theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,pasteword,separator,undo,redo,separator,removeformat,cleanup,separator,code",
  theme_advanced_buttons2 : "formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,charmap"

});
//-->
</script>

---

Nach der language-Option kommt besagtes elements-Feld.

Hallo David

Vielen Dank, es hat geklappt!

Noch eine Frage:

Ist es möglich einzelne Buttons auszublenden?

Code:

---

  theme_advanced_buttons1 : "newdocument,save,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,attribs,separator,search,replace,pasteword,separator,undo,redo,separator,removeformat,cleanup,separator,code",
  theme_advanced_buttons2 : "formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,separator,bullist,numlist,indent,outdent,separator,blockquote,separator,charmap"

---

Einfach rauslöschen, was du nicht brauchst :)

Danke Toflar, klar :o:D

Jetzt habe ich noch ein Problem. Ich habe folgenden Code:

HTML-Code:

---

<script type="text/javascript" src="{{env::url}}/plugins/tinyMCE/tiny_mce_gzip.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
tinyMCE_GZ.init({
  plugins : "advimage,autosave,contextmenu,directionality,emotions,inlinepopups,paste,safari,save,searchreplace,spellchecker,style,table,template,xhtmlxtras",
  themes : "advanced",
  languages : "{{iflng::de}}de{{iflng}}{{iflng::en}}en{{iflng}}",
  disk_cache : false,
  debug : true
});
//-->
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
tinyMCE.init({
  mode : "exact",
  height : "300",
  language : "{{iflng::de}}de{{iflng}}{{iflng::en}}en{{iflng}}",
  elements : "ctrl_63",
  remove_linebreaks : false,
  force_hex_style_colors : true,
  fix_list_elements : true,
  fix_table_elements : true,
  theme_advanced_font_sizes : "9px,10px,11px,12px,13px,14px,15px,16px,17px,18px,19px,20px,21px,22px,23px,24px",
  doctype : '',
  document_base_url : "{{env::url}}/{{env::request}}",
  entities : "160,nbsp,60,lt,62,gt",
  cleanup_on_startup : true,
  save_enablewhendirty : true,
  save_on_tinymce_forms : true,
  save_callback : "TinyCallback.cleanXHTML",
  advimage_update_dimensions_onchange : false,
  plugins : "advimage,autosave,contextmenu,directionality,emotions,inlinepopups,paste,safari,save,searchreplace,spellchecker,style,table,template,typolinks,xhtmlxtras",
  spellchecker_languages : "+English=en,Danish=da,Dutch=nl,Finnish=fi,French=fr,German=de,Italian=it,Polish=pl,Portuguese=pt,Spanish=es,Swedish=sv",
  content_css : "/basic.css,/system/themes/tinymce.css",
  event_elements : "a,div,h1,h2,h3,h4,h5,h6,img,p,span",
  extended_valid_elements : "q[cite|class|title]",
  tab_focus : ":prev,:next",
  theme : "advanced",
  theme_advanced_resizing : true,
  theme_advanced_resize_horizontal : false,
  theme_advanced_toolbar_location : "top",
  theme_advanced_toolbar_align : "left",
  theme_advanced_statusbar_location : "bottom",
  theme_advanced_source_editor_width : "550",
  theme_advanced_blockformats : "div,p,address,pre,h1,h2,h3,h4,h5,h6",
  theme_advanced_buttons1 : "spellchecker,separator,typolinks,unlink,separator,image,typobox,separator,sub,sup,separator,abbr,acronym,separator,styleprops,separator,search,replace,pasteword,separator,undo,redo,separator,removeformat,cleanup,separator,code",
  theme_advanced_buttons2 : "formatselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,indent,outdent,separator,forecolor,separator,backcolor,separator,table,separator,emotions,separator,charmap",
  theme_advanced_buttons3 : ""

});
//-->
</script>

---

Wenn ich jetzt bei der Textarea das "Pflichtfeld" auswähle und im Frontend etwas hineinschreibe und dann auf Senden klicke, kommt folgende Fehlermeldung:

Zitat:

---

Bitte füllen Sie das Feld "Details" aus!

---

Wenn ich den JS-Code herausnehme, kommt diese Fehlermeldung nicht. Die Textarea erkennt mit dem tinyMCE kein Inhalt, ohne tinyMCE schon.

An was liegt das? Muss ich etwas im JS-Code einstellen?

Danke!

Zitat:

---

Zitat von Dani

Die Textarea erkennt mit dem tinyMCE kein Inhalt, ohne tinyMCE schon.

An was liegt das? Muss ich etwas im JS-Code einstellen?

Danke!

---

Schmeiss aus deinem Code folgende Zeile raus:

Code:

---

  save_callback : "TinyCallback.cleanXHTML",

---

Dann sollte es funktionieren.

Danke viel Mal!!! An dem lag es. :D

Da kommt schon das nächste Problem:

Wenn ich jetzt im Frontend das ganze bearbeite (Text fett, underline, zentriert) wird es nicht so in die Datenbank (das Feld ist ein BLOB) geschrieben. Im Backend schon. Ich habe ein kleines Modul geschrieben, das sieht ungefähr so aus:

PHP-Code:

---

$details = $this->Input->post('text');
$this->Database->execute("INSERT INTO tl_table (id, pid, tstamp, ip, Problem, memberId, alias, date, time, text, addEnclosure, enclosure, noComments, published, author) VALUES ('', $memberId, $time, '$memberIp', '$problem', $memberId, '$alias', $time, $time, '$details', $addEnclosure, $addEnclosure, $noComments, '', $memberId)"); 


---

Der Text, den ich im Frontend erstelle, soll genau so mit allen Formatierungen in die Datenbank gespeichert werden. Muss ich noch irgendetwas beachten? Wieso werden die Formatierungen nicht mit eingetragen?

Du musst die Funktion postHtml nehmen, da bei post alle HTML Tags entfernt werden.

PHP-Code:

---

$details = $this->Input->postHtml('text');
$this->Database->execute("INSERT INTO tl_table (id, pid, tstamp, ip, Problem, memberId, alias, date, time, text, addEnclosure, enclosure, noComments, published, author) VALUES ('', $memberId, $time, '$memberIp', '$problem', $memberId, '$alias', $time, $time, '$details', $addEnclosure, $addEnclosure, $noComments, '', $memberId)"); 


---

Gruss
Chris

xtra du bist der Haaammer! Es funktioniert. Danke! :D:cool:

Hallo zusammen,

Zum Thema ...
"Des weiteren ist es möglich den Editor ins FE zu würgen, indem man die js lädt und in den config-Zeilen die entsprechende Textarea zuweist."

Das geht doch ganz einfach mit der Erweiterung "formrte" im Erweiterungskatalog?!

Grüße :eek:

Ja du hast Recht.

Ich habe ihn mir jetzt installiert und tinyMCE.php ausgewählt. Leider wird im Frontend aber kein Editor angezeigt bzw. es passiert gar nichts, kann jemand helfen? Muss ich noch etwas einstellen?

Hallo!

Du mußt der Textareat im Formulargenerator noch sagen, dass es den TinyMCE nutzen soll. ;

Beim Punkt Text-Editor kannst Du dann auch die Ausgabe auswählen.

Ja, das habe ich ja gemacht. Ich glaube es wird gar kein JS-Script im Frontend geladen. Hat sonst noch jemand eine Idee?

Wenn Du die Seite mit dem Formular aufrufst sollte der ganze Javascriptkram im Header stehen.

Ich weiss jetzt an was es liegt.

Das Formular verwende ich in einem Modul, welches ich erstellt habe. Dieses Formular includiere ich via Modul in mein Template. So funktioniert der formrte nicht. Wenn ich das Formular via Inhaltselement einfüge, funktioniert es.

Das finde ich ein bisschen komisch. Weiss jemand an was das liegt?

Ich weiss immer noch nicht an was es liegt, löse es jetzt aber so:

Zuerst füge ich via CE mein Modul ein, welches die Daten des Formulars verarbeitet. Dann füge ich via CE das Formular ein. So funktioniert es.

[feedit] Frontend Editor

Ist zwar eine Alpha, könnte aber vielleicht helfen.
Zudem hat der Katalog demnächst einen FE Editor...

Zitat:

---

Zitat von david enke

Zudem hat der Katalog demnächst einen FE Editor...

---

Die Alpha kann das schon recht gut, sucht aber noch Tester :)

Gruss
Chris

na auf jeden fall, dito! ;)
gibt es eigtl auch einen single release des editors? bzw. kann man den editor als erweiterung zum akzuellen stable release einzeln veröffentlicht ergattern?

ich würde diese funktion gern bereits in einem produktivsystem testen - bislang arbeite ich mit meinem fe editor; zumal der ja alle db-tabellen bearbeitet...

Zitat:

---

Zitat von david enke

na auf jeden fall, dito! ;)
gibt es eigtl auch einen single release des editors? bzw. kann man den editor als erweiterung zum akzuellen stable release einzeln veröffentlicht ergattern?

---

Nein, momentan ist er hart verdrahtet im Katalog integriert.
Ich entwickle jedoch momentan eine standalone Loesung, welche das DCA parst und entsprechende Eingabemasken generiert.
Das speichern ist hierbei jedoch dem Modulentwickler ueberlassen.
Meine Komponente unterstuetzt denselbigen jedoch nach Leibeskraeften, indem sie die rgxp usw. selbstaendig auswertet und entspechend ein wantSave nach aussen exportiert.
Dies ist jedoch noch nichtmal pre beta und daher wird es noch eine Weile dauern.
Jedoch fragen mich immer mehr Leute danach, von daher sollte ich die Entwicklung hieran evtl. doch ein bisschen vorantreiben, jedoch hab ich leider momentan recht viel auf dem Schreibtisch.

ja, das kenn ich. gibt es im google code eigtl. eine timeline, bzw. wann ist ungefähr eine standalone beta denkbar?