Frontend Editor

[david enke]

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 (), 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)!

[MacKP]

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

[Dani]

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

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.

[david enke]

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:

Im HTML Feld kommt wie o.g. folgender 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.

[Dani]

Hallo David

Vielen Dank, es hat geklappt!

[Dani]

Noch eine Frage:

Ist es möglich einzelne Buttons auszublenden?

[Toflar]

  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

[Dani]

Danke Toflar, klar

[Dani]

Jetzt habe ich noch ein Problem. Ich habe folgenden 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:

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!

[xtra]

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:

  save_callback : "TinyCallback.cleanXHTML",

Dann sollte es funktionieren.

[Dani]

Danke viel Mal!!! An dem lag es.

[Dani]

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:

$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?

[xtra]

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

$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

[Dani]

xtra du bist der Haaammer! Es funktioniert. Danke!

[Sitting Bull]

Erweiterung für TinyMCE im Frontend

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