C3: TinyMCE in einem Formular eines eigenen Frontend-Moduls verwenden

[fluppi]

Hallöchen,

hab mal wieder ein Problem... es geht um eine Erweiterung (Contao 3), die im Frontend Formulare erzeugt und dabei auch den TinyMCE verwenden soll.

Die Formulare selbst erzeuge ich so wie es die Erweiterung "comments" macht, d.h. ich erstelle mir ein Array mit meinen Feldern und verwende dann in einer Schleife die Methode "prepareForWidget", um daraus meine Widget-Objekte zu erstellen, die ich dann dem Template übergebe. Das funktioniert auch einwandfrei.

Mein Felder-Array sieht so aus (reduziert auf das eine Feld um das es geht):

    $arrFields = array
    (
        'text' => array
        (
            'name'        => 'cetext',
            'label'       => 'Text',
            'value'       => $element->text,
            'inputType'   => 'textarea',
            'eval'        => array('mandatory'=>true, 'rte'=>'tinyMCE', 'allowHtml'=>true, 'helpwizard'=>true),
            'explanation' => 'insertTags',
        )
    ) 

Das habe ich mir bei Backend-Modulen abgeguckt, dort scheint es so zu sein, dass eine TextArea mit dem RTE-Editor angezeigt wird, wenn in 'eval' im Feld 'rte' die Konfigurationsdatei angegeben wird.

Im Frontend aber scheint das nicht zu genügen, es wird nur eine normale HTML-Textarea ausgegeben. Ich hab darum noch 'allowHtml' hinzugefügt, was aber auch nichts bewirkt hat.

Also hab ich mal gegoogelt und im Forum gesucht. Dabei stiess ich vor allem auf diese Threads (in denen ich nicht nachfragen wollte, weil ich zum einen nicht sicher bin, ob es in diesem Forum gern gesehen wird, wenn man alte Threads wieder hervorholt und zum anderen ob ich dort mit meiner Frage überhaupt richtig bin):

RTE bei Widgets möglich?

Hier wird von der Erweiterung von GLOBALS['TL_RTE'] gesprochen, die aber scheinbar auch nicht geholfen hat. Ich weiss nicht, ob so eine Erweiterung nun nötig ist oder nicht und wenn ja, was da wie erweitert werden soll, was ich da eintragen sollte.

Dann kommt der Hinweis, mal zu gucken, wie es die Erweiterung "formrte" macht. Die betrifft den Formular-Generator, ob das dann auch für eigene (also per Code erzeugte) Formulare gilt, weiss ich nicht. Im Quelltext finde ich dann in der Klasse "FormRTE" in der Methode "loadFormField()" diesen Code:

if ($objWidget instanceof FormTextArea && strlen($objWidget->rte) && $GLOBALS['TL_CONFIG']['useRTE'])
        {
            $GLOBALS['TL_RTE']['type'] = $objWidget->rte;
            $GLOBALS['TL_RTE']['fields'][] = 'ctrl_' . $objWidget->id;
        } 

Das sieht mir doch nach einer entscheidenden Stelle aus, jedoch frage ich mich, wo die Eigenschaft "rte" von $objWidget herkommt und was dort drin stehen müsste? (edit: wo sie herkommt hab ich grad gesehen, aus der database.sql, und es muss der Name der tiny-Configdatei drinstehen ...)

TinyMCE im Frontend nicht möglich

Hier geht es wohl um die Erweiterung xtmembers und ich weiss nicht, ob das, was dort steht, auch für eigene Formulare relevant ist. Ich habe aber dann versucht, eine Datei "tinyFrontend.php" unter "system/config" anzulegen mit dem im Thread genannten Inhalt und dann in meiner Felddefinition oben das 'rte'=>'tinyMCE' durch 'rte'=>'tinyFrontend' ersetzt, aber das hat nicht geholfen (keine sichtbare Veränderung).

Katalog: Kein TinyMCE im Frontend-Editing

Hier gehts um die Erweiterung Katalog und es wird auf die oben schon genannte angepasste tinyFrontend.php hingewiesen, was ich ja aber schon ausprobiert habe.

Tja langer Rede kurzer Sinn, ich bin mir gerade nicht sicher, ob es überhaupt möglich ist, den TinyMCE in eigenen Frontend-Formularen zu verwenden. Es gibt ja die Klassen TextArea und FormTextArea, und wenn ich das richtig verstehe wird erstere bei Backend-Formularen verwendet und letztere bei Frontend-Formularen, und nur erstere scheint TinyMCE zu unterstützen. Wobei wohl genau das durch die Erweiterung "formrte" geändert wird?

Sollte es doch möglich sein, frage ich mich, welche Schritte dazu nötig sind. Möglicherweise sehe ich ja auch den Wald vor lauter Bäumen nicht und es reicht eine leichte Anpassung meiner Felddefinition. Oder vielleicht gibt es irgendwo eine Anleitung dazu, oder jemand kann mir sagen, dass ich mit den Hinweisen aus einem der genannten Threads auf der richtigen Spur bin, dann weiss ich wenigstens, dass es sich lohnt, da weiter in den Quellcode einzusteigen.

Wäre für jeden noch so kleinen Hinweis sehr dankbar :-)

edit: Nachdem ich mir die formrte-Erweiterung näher angesehen habe, hab ich festgestellt, dass diese neben der Erweiterung der Tabelle mit den Formular-Feldern vor allem einen LoadFormField-Hook definiert, wo dann der TineMCE eingebunden und konfiguriert wird. Nun verwende ich ja nicht den Formular-Generatur und die zugehörigen Datenbanktabellen und auch nicht die Klasse Form ,in der der LoadFormField-Hook aufgerufen wird. Also hab ich mir gedacht, dass ich den entsprechenden Code leicht abgeändert einfach an der Stelle einbinde, wo mein Widget erzeugt wird. Das ist bei mir die Schleife, die aus den Einträgen in arrFields die Widgets konstruiert und die ich mir aus der comments-Erweiterung abgeguckt hat. Das Ergebnis sieht so aus (der if-Bereich mit dem Kommentar "// ggf. RTE-Editor aktivieren:" ist das, was ich zugefügt habe):

foreach ($arrFields as $arrField)
        {
            $strClass = $GLOBALS['TL_FFL'][$arrField['inputType']];

            // Continue if the class is not defined
            if (!class_exists($strClass))
            {
                continue;
            }

            $arrField['eval']['required'] = $arrField['eval']['mandatory'];
            $objWidget = new $strClass($this->prepareForWidget($arrField, $arrField['name'], $arrField['value']));

            // ggf. RTE-Editor aktivieren:
            if ($objWidget instanceof FormTextArea /*&& strlen($objWidget->rte) && $GLOBALS['TL_CONFIG']['useRTE']*/)
            {
                    $GLOBALS['TL_RTE']['type'] = 'tinyFrontend'; // $objWidget->rte;
                    $GLOBALS['TL_RTE']['fields'][] = 'ctrl_' . $objWidget->id;
                    
                    $this->base = $this->Environment->base;
            $this->brNewLine = $GLOBALS['TL_CONFIG']['pNewLine'] ? false : true;
            $this->rteFields = implode(',', $GLOBALS['TL_RTE']['fields']);
                        
                    $strFile = sprintf('%s/system/config/%s.php', TL_ROOT, $GLOBALS['TL_RTE']['type']);

                    if (!file_exists($strFile))
                    {
                       throw new Exception(sprintf('Cannot find rich text editor configuration file "%s.php"', $GLOBALS['TL_RTE']['type']));
                    }
                    
                    ob_start();
                    include($strFile);
                    $GLOBALS['TL_HEAD']['rte'] = ob_get_contents();
                    ob_end_clean();
                    $GLOBALS['TL_JAVASCRIPT']['rte'] = 'typolight/typolight.js';
              }
                
            // Validate the widget
            if (\Input::post('FORM_SUBMIT') == $strFormId)
            {
                $objWidget->validate();
                if ($objWidget->hasErrors())
                {
                    $this->doNotSubmit = true;
                }
            }
            $arrWidgets[$arrField['name']] = $objWidget;
        }
        return $arrWidgets; 

Die "tinyFrontend.php" liegt im system/config-Ordner. Im Layout habe ich das TinyMCE-CSS eingebunden (und testweise auch jquery bzw. mootools). Hat alles nichts gebracht, im Formular wird immer noch die normale Textarea angezigt.
Tschüss,
fluppi

[fluppi]

Sorry Leute aber da unten hab ich mal wieder Blödsinn geschrieben (darum alles durchgestrichen).

Irgendwie hat sich bei mir eine uralte Version der formRTE-Erweiterung eingeschmuggelt und ich hatte die in meinem Contao 3 installiert. Darum der unten beschriebene Fehler, der eigentlich in formRTE längst gefixt ist.

Die aktuelle Version von formRTE funktioniert (nach Erstellung der Autoload-Datei) auch mit Contao 3.

edit: So, da das bei mir nun alles funktioniert will ich noch kurz erläutern, wie die Lösung aussieht, um bei selbsterzeugten Frontendformularen (so wie in der Erweiterung "comments") den TinyRTE zu verwenden. Erstmal einfach die tolle Erweiterung "formRTE" installieren, mit der das sofort in per Formulargenerator erzeugten Formularen funktioniert.

Damit es dann auch mit den selbsterzeugten Formularen geht, muss man in die Schleife, die aus dem Array arrFields die Widgets erzeugt (aus der Erweiterung "comments"), noch zwei Kleinigkeiten einbauen: die Eigenschaft "rte" des Widgets muss mit dem Wert 'rte' aus dem Eval-Array gefüllt werden und der "loadFormField"-Hook muss aufgerufen werden. Im Code:

            ....
            $arrField['eval']['required'] = $arrField['eval']['mandatory'];
            $objWidget = new $strClass($this->prepareForWidget($arrField, $arrField['name'], $arrField['value']));

            // Eigenschaft "rte" des Widgets auf den entsprechenden Wert aus dem Eval-Feld des DCA holen,
            // da dieses Widget nicht aus der DB kommt, wo "rte" sonst normalerweise hergeholt wird (von
            // der Erweiterung "formRTE")
            $objWidget->rte = $arrField['eval']['rte'];
            
            // HOOK: load form field callback
            if (isset($GLOBALS['TL_HOOKS']['loadFormField']) && is_array($GLOBALS['TL_HOOKS']['loadFormField']))
            {
                foreach ($GLOBALS['TL_HOOKS']['loadFormField'] as $callback)
                {
                    $this->import($callback[0]);
                    $objWidget = $this->$callback[0]->$callback[1]($objWidget, $formId, $this->arrData, $this);
                }
            }

            // Validate the widget
            if (\Input::post('FORM_SUBMIT') == $strFormId)
            {
                $objWidget->validate();
               ... 

Nun kann man im Array arrFields die zu verwendende tinyMCE-Konfig-Datei genauso angeben wie es bei Backend-DCAs der Fall ist (also im Eval-Array). Wenn es mit der normalen tinyMCE.php nicht funktioniert, sollte man sich eine wie aus dem oben verlinkten Beitrag angepasste "tinyFrontend.php" basteln, damit hat es dann bei mir geklappt.


Möglicherweise liegt es an Contao 3.0, dass das alles nicht so funktioniert wie ich dachte, bzw. wie es in "formRTE" funzt.

[...]
Daraufhin wollte ich mal ausprobieren, ob die Erweiterung "formRTE" eigentlich unter Contao 3.0 funktioniert (unter 2.11 hatte ich sie ausprobiert, ging einwandfrei). Leider ist die Erweiterung noch nicht für C3 angepasst, aber ich habe dann einfach mit dem Autoload-Creator die Autoload-Datei erstellt.

Wenn ich nun aber in einem Formular im Formulargenerator eine TinyMCE-Config-Datei auswähle, bekomme ich folgenden Fehler im Backend, wenn er im Artikelbereich im Backend versucht, das Formular darzustellen (im Formularbereich wird es angezeigt, aber ohne RTE, also als normale HTML-Textarea):

Warning: Invalid argument supplied for foreach() in D:\Contao2Go\htdocs\vhosts\contao-3.0.0\system\modules\core\classes\BackendTemplate.php on line 72

#0 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\system\modules\core\classes\BackendTemplate.php(72): __error(2, 'Invalid argumen...', 'D:\Contao2Go\ht...', 72, Array)
#1 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\contao\main.php(310): Contao\BackendTemplate->output()
#2 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\contao\main.php(125): Main->output()
#3 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\contao\main.php(319): Main->run()
#4 {main}


Fatal error: Uncaught exception Exception with message Cannot find editor configuration file "type.php" thrown in D:\Contao2Go\htdocs\vhosts\contao-3.0.0\system\modules\core\classes\BackendTemplate.php on line 83

#0 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\contao\main.php(310): Contao\BackendTemplate->output()
#1 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\contao\main.php(125): Main->output()
#2 D:\Contao2Go\htdocs\vhosts\contao-3.0.0\contao\main.php(319): Main->run()
#3 {main}

Und wenn ich mir das Formular dann im Frontend ansehe, bekomme ich komischerweise keine Fehlermeldung, aber meine Textarea ist nach wie vor die langweilige HTML-Textarea und kein TinyMCE :-(

Tschö,
fluppi

[Webkrebse]

Huhu,

ich habe mir eine eigene tinymce-config geschrieben, die genau auf eine Textarea mit einer bestimmten id im Frontend reagiert. Jetzt möchte ich gerne im Frontend den tinymce einbinden.

<?php include 'tinyMCE_frontend.php'; ?>

Im entsprechenden Frontend-Template funktioniert prinzipiell. Wie mache ich das aber korrekt?

Sorry ich bin noch nicht tief genug in die Extension-Programmierung eingestiegen, um die obigen Posts zu kapieren. :-(

[fluppi]

Hallo,

wie hast du denn dein Frontend-Formular mit der Text-Area erstellt? Wenn du sie mit dem Formular-Generator erstellt hast, kannst du die Erweiterung "FormRTE" installieren. Dann solltest du (wenn ich mich recht erinnere) im Formular-Generator die Möglichkeit haben, deine tinyMCE-Config einzubinden.

Bei mir ging es oben vor allem um "selbst erstellte" Formulare, da ist neben der Installation von FormRTE noch ein bischen Arbeit nötig.

Tschö,
fluppi

[Webkrebse]

Hi vielen Dank,
ich möchte tinymce gerne in der Helpdesk Extension verwenden.
Die Einbindung über das include funktioniert soweit ganz gut. Dass nicht alle Buttons funktionieren scheint andere Gründe zu haben.
Aber vielen Dank für den Hinweis. Ich werde den tinymce wohl auch noch an anderer Stelle im Frontend einbinden.

[soweit_ok]

Hi vielen Dank,
ich möchte tinymce gerne in der Helpdesk Extension verwenden.
Die Einbindung über das include funktioniert soweit ganz gut. Dass nicht alle Buttons funktionieren scheint andere Gründe zu haben.
Aber vielen Dank für den Hinweis. Ich werde den tinymce wohl auch noch an anderer Stelle im Frontend einbinden.

Guten Morgen,

hm, ich hab erstmal ein bisschen gestutzt wg. Deiner include-methode. Doch stimmt, warum sollte das nicht funktionieren. Auf die Idee bin ich noch garnicht gekommen. Was mich bloß dabei wundert, woher weiß das TinyMCE-Javascript dann, in welchem Formularfeld oder welchen Feldern es den Editor einbinden soll?

Ich bin zwar noch nicht bei Contao 3, aber das sollte ja keinen grundsätzlichen Unterschied ausmachen. Soweit ich es sah, wird in Erweiterungen, bei denen der Tiny vorgesehen ist, der Intitialisierungscode einfach am Ende des betreffenden Templates reingesetzt. Oder gleich nach dem Formular und vor der Fehlerbehandlung der Formularfelder. Vielleicht ist das irgendwie wichtig, dass der JS-Code der Fehlerbehandlung, wo "window.scrollTo(null, ($('<?php echo $this->formId; ?>').getElement('p.error').getPosition().y - 20));" aufgerufen wird, erst nach dem Tiny-Code kommt, glaube aber nicht.

Warum ich stutzte, ist einfach, dass der TinyMCE bei der Initialisierung ja irgendwie erfahren muss, in welchen Feldern er erscheinen soll und er muss die schließlich auch richtig speichern. Das funktioniert normalerweise mittels Parameterangabe elements : "CSS-Id des Feldes". Und ansonsten wird dort ja auch alles andere angegeben, welche Plugins geladen werden sollen, welche Buttons etc.

Als Beispiel mal den Code, wo ich den Tiny im Template in ein Formularfeld einband, und zwar ist hier die Besonderheit die Einbindung des Filebrowser-Plugins, womit angemeldete FE-Mitglieder dann Zugriff auf ihren persönlichen Filemount auf dem Server erhalten. Ich hatte zuvor alles mögliche probiert, brachte das Laden dieses Plugins aber auf keine andere Weise zustande als per direktem Aufruf im Template ...

<script type="text/javascript" src="/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 : "<?php echo $this->language; ?>",
  disk_cache : true,
  debug : true
});
//--><!]]>
</script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
tinyMCE.init({
  mode : "exact",
  height : "300",
  language : "<?php echo $this->language; ?>",
  elements : "ctrl_message",
  file_browser_callback : "filebrowser",
<?php if ($this->brNewLine): ?>
  forced_root_block : false,
  force_p_newlines : false,
  force_br_newlines : true,
<?php endif; ?>
  remove_linebreaks : false,
  force_hex_style_colors : true,
  fix_list_elements : true,
  fix_table_elements : true,
  font_size_style_values : "8pt,10pt,12pt,14pt,18pt,24pt,36pt",
  doctype : '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">',
  document_base_url : "/",
  entities : "160,nbsp,60,lt,62,gt",
  cleanup_on_startup : true,
  save_enablewhendirty : true,
  save_on_tinymce_forms : true,
  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 : "<?php echo TL_PATH; ?>/basic.css,<?php echo TL_PATH; ?>/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 : "700",
  theme_advanced_blockformats : "div,p,address,pre,h1,h2,h3,h4,h5,h6",
  theme_advanced_buttons1 : "newdocument,separator,spellchecker,separator,anchor,separator,typolinks,unlink,separator,image,charmap,emotions,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,fontsizeselect,styleselect,separator,bold,italic,underline,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,bullist,numlist,outdent,indent,separator,forecolor,backcolor",
  theme_advanced_buttons3 : "tablecontrols,separator,template"
});
function filebrowser(field_name, url, type, win) {
        
    fileBrowserURL = "/plugins/tinyMCE/plugins/filebrowser/index.php?filter=" + type;
            
    tinyMCE.activeEditor.windowManager.open({
        title: "TM Dateibrowser",
        url: fileBrowserURL,
        width: 950,
        height: 650,
        inline: 0,
        maximizable: 1,
        close_previous: 0
    },{
        window : win,
        input : field_name
    });        
}
//--><!]]>
</script>

Tja und ansonsten kenne ich den TinyMCE sowieso als ziemliche Zicke, die mit Vorliebe Konfigurationsangaben ignoriert und ihr Eigenleben zu besitzen scheint. Hab ich grad gestern wieder gehabt, dass das falsche Theme geladen und das falsche CSS geladen wurde. Wird schon einen Grund haben, aber man muss bei dem Teil immer unheimlich aufpassen, sonst macht es was es will. Vielleicht funktioniert Dein include(), weil Du es womöglich direkt im Formularfeld platziert hast. Das wär ja dann nicht ungeschickt, falls auch richtig gespeichert wird. Ich werd das die Tage mal ausprobieren. Die in diesem Thread gepostete andere Methode klingt auch interessant, löst es aber auch nicht unbedingt für sämtliche Elemente, wo man den RTE eventuell haben will.