TinyMCE im Plugin-Backend

Alles rund um Module und Plugins in CONTENIDO 4.9.
Antworten
HansPeterOrding
Beiträge: 3
Registriert: Mi 2. Mär 2016, 17:07
Kontaktdaten:

TinyMCE im Plugin-Backend

Beitrag von HansPeterOrding » Mi 2. Mär 2016, 17:10

Hallo zusammen,

ich habe mich jetzt eine ganze Weile mit Contenido (4.9.9) beschäftigt, da ich einen entsprechenden Kundenauftrag habe. Prinzipiell komme ich auch sehr gut klar und auch die Plugin-Entwicklung ist ja nicht besonders kompliziert.
Ich würde nun aber gerne in meinem Plugin im Backend innerhalb eines Formulars einzelne Felder mit TinyMCE editierbar machen. Gibt es hier eine "einfache" Option in dem man der textarea z.B. eine bestimmte Klasse oder ein data-*-Attribut zuweist, um den TinyMCE zu aktivieren oder wird das komplizierter?
Wenn es komplizierter wird: Welche Schritte sind notwendig, wenn ich einen sauberen Weg dafür gehen will?

Vielen Dank für eure Hilfe, Grüße,

HansPeter

Faar
Beiträge: 1915
Registriert: Sa 8. Sep 2007, 16:23
Wohnort: Brandenburg
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von Faar » Di 8. Mär 2016, 10:17

Schon etwas weiter gekommen damit?
Würde mich auch interessieren.

VG,
Faar
Fliegt der Bauer übers Dach, ist der Wind weißgott nicht schwach.

HansPeterOrding
Beiträge: 3
Registriert: Mi 2. Mär 2016, 17:07
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von HansPeterOrding » Di 8. Mär 2016, 10:24

Leider noch keine Fortschritte. Da ich aber heute oder spätestens morgen das Projekt abschließen muss, werde ich mich da jetzt mal reinfuchsen und ggf. meine Lösung hier auch vorstellen.

HansPeterOrding
Beiträge: 3
Registriert: Mi 2. Mär 2016, 17:07
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von HansPeterOrding » Mi 9. Mär 2016, 12:01

So, ich habe jetzt eine Möglichkeit gefunden, in einer Form zumindest schonmal ein einzelnes TinyMCE-Element einzufügen. Das ist sogar eigentlich recht einfach:

In der PHP-Datei generiere ich mir das Javascript und den Editor selbst über die Klasse cTinyMCEEditor:

$mce = new cTinyMCEEditor('formfield_name', 'formfield_value');
$script = $mce->_getScripts();
$textarea = $mce->_getEditor();

Danach ersetze ich einfach im Template zwei Platzhalter damit und bin schon fertig:

$tpl->set('s', 'tinyScript', $script);
$tpl->set('s', 'myTextArea', $textarea);

Das ganze kann innerhalb einer ganz normalen Form stehen und der Inhalt wird dadurch dann auch schon gesendet und kann ganz easy (genau wie ohne TinyMCE) über $_POST verarbeitet werden.

Ich habe auch mal probiert, mehrere TinyMCE-Felder in einer Form zu haben, das hat aber nicht geklappt, weil ein Javascript-Fehler geschmissen wurde. Da ich momentan noch nur ein Feld brauche, hab ich mir jetzt mal nicht die Mühe gemacht, das zu debuggen. Wenn das einer braucht: Ich vermute, man muss dann per Javascript erst onfocus den TinyMCE pro Feld aktivieren, da es nur eine Instanz geben darf. Das dürfte dann allerdings etwas komplizierter werden. Vermutlich muss man sich die Ersetzungen dann komplett ins Javascript schreiben und die dann dort verwenden.

rethus
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von rethus » Mi 9. Mär 2016, 12:31

Kannst du deine Code-Bereiche bitte inerhalb folgender Tags packen... das erhöht die Lesbarkeit

Code: Alles auswählen

[code=php]Dein Code hier...  
[/code]

Zu deinem Problem... in cTinyMCEEditor musst du ja den formfield_name übergeben. Hier müsste für jedes weitere Textfeld ein eigener Name erfasst werden. Dann sollte es auch mit mehreren Tiny's pro Page klappen.

Code: Alles auswählen

$mce = new cTinyMCEEditor('formfield_name1', 'formfield_value');

Code: Alles auswählen

$mce = new cTinyMCEEditor('formfield_name2', 'formfield_value');
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

wolfgangwoehrle
Beiträge: 46
Registriert: Di 6. Mär 2012, 10:51
Wohnort: 72275 Alpirsbach
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von wolfgangwoehrle » Mi 9. Mär 2016, 21:58

Hallo!

Ich habe den Tinymce4 schon bei einigen Plugins integriert. Ist eigentlich ganz einfach.
Bei Interesse gerne schreiben an mail@wolfgangwoehrle.de

Viele Grüße
Wolfgang
Wolfgang Wöhrle MEDIA
Freudenstädter Str. 86
72275 Alpirsbach
mail@wolfgangwoehrle.de | www.wolfgangwoehrle.de

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von McHubi » Do 10. Mär 2016, 09:41

Hallo Wolfgang,

ich bin sicher, dass das Thema auch andere Forenteilnehmer interessiert. Wie wäre es, wenn Du Deine einfache Lösung hier als Post veröffentlichst? :wink:

Danke Dir! :D
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

rethus
Beiträge: 1851
Registriert: Di 28. Mär 2006, 11:55
Wohnort: Mönchengladbach
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von rethus » Do 10. Mär 2016, 11:34

Was war das Ergebnis meines obigen Vorschlags?
Could I help you... you can help me... buy me a coffee . (vielen ❤ Dank an: Seelauer, Peanut, fauxxami )

xstable.com: - HighSpeed Hosting, Domains, DomainReselling, Linux-Administration
suther.de: - App-Programierung, High-Performance-Webpages, MicroServices, API-Anbindungen & Erstellung

Software... ein Blick wert: GoogleCalender Eventlist, xst_dynamic_contentType

wolfgangwoehrle
Beiträge: 46
Registriert: Di 6. Mär 2012, 10:51
Wohnort: 72275 Alpirsbach
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von wolfgangwoehrle » Do 10. Mär 2016, 12:53

Einfach in an der entsprechenden gewünschten Stelle folgendes einfügen:

Zunächst braucht man ein paar JS-includes für den TinyMCE. Dann einfach ein neues Objekt vom Typ "cTinyMCE4Editor" erstellen und die Standardeigenschaften mit eigenen Einstellungen (_setSetting) überschreiben. Die Funktion _getEditorCustom() gibt eine Textarea aus. Bei mehreren TinyMCE-Textareas auf einer Seite einfach ein weiteres Objekt erstellen.

Code: Alles auswählen

<script language="javascript" type="text/javascript" src="scripts/contenido.js"></script>
<script language="javascript" type="text/javascript" src="external/wysiwyg/tinymce4/tinymce/js/tinymce/tinymce.min.js"></script>
<script src="external/wysiwyg/tinymce4/contenido/js/con_tiny.js" type="text/javascript"></script>

		<?php
			$cTinyMCE4Editor = new cTinyMCE4Editor("vAdresse","","vAdresse");
			$cTinyMCE4Editor->_setSetting("vAdresse","toolbar1","cut copy paste pastetext | undo redo | bold italic underline subscript superscript",true);
			$cTinyMCE4Editor->_setSetting("vAdresse","toolbar2","link unlink anchor image | bullist numlist | outdent indent | alignleft aligncenter alignright alignfull | charmap",true);
			$cTinyMCE4Editor->_setSetting("vAdresse","toolbar3","",true);
			$cTinyMCE4Editor->_setSetting("vAdresse","menubar",false,true);

			$myEditorName = "vAdresse";
			$myEditorContent = "";

			echo $cTinyMCE4Editor->_getEditorCustom($myEditorName,$myEditorContent);
		?>

Die _getEditorCustom()-Funktion habe ich in die Klasse eingefügt:

Code: Alles auswählen

    public function _getEditorCustom($pTextareaName,$pTextareaContent = "") {
        global $sess, $cfg, $lang, $client, $idart, $cfgClient;

        // TODO: Check functionality - doesn't seem to have any effect...
        $browserparameters = array("restrict_imagebrowser" => array("jpg", "gif", "jpeg", "png"));
        $sess->register("browserparameters");


        // Set browser windows
        // Difference between file and image browser is with (file) or without categories/articles (image)
        $oTemplate = new cTemplate();

        $oTemplate->set('s', 'CONFIG', json_encode($this->_aSettings));

        $oTemplate->set('s', 'PATH_CONTENIDO_FULLHTML', cRegistry::getConfigValue('path', 'contenido_fullhtml'));
        $oTemplate->set('s', 'IMAGEBROWSER', $cfg["path"]["contenido_fullhtml"] . 'frameset.php?area=upl&contenido=' . $sess->id . '&appendparameters=imagebrowser');
        $oTemplate->set('s', 'FILEBROWSER', $cfg["path"]["contenido_fullhtml"] . 'frameset.php?area=upl&contenido=' . $sess->id . '&appendparameters=filebrowser');
        $oTemplate->set('s', 'MEDIABROWSER', $cfg["path"]["contenido_fullhtml"] . 'frameset.php?area=upl&contenido=' . $sess->id . '&appendparameters=imagebrowser');
        $oTemplate->set('s', 'FRONTEND_PATH', $cfgClient[$client]["path"]["htmlpath"]);
        $oTemplate->set('s', 'CLOSE', html_entity_decode(i18n('Close editor'), ENT_COMPAT | ENT_HTML401, cRegistry::getEncoding()));
        $oTemplate->set('s', 'SAVE', html_entity_decode(i18n('Close editor and save changes'), ENT_COMPAT | ENT_HTML401, cRegistry::getEncoding()));
        $oTemplate->set('s', 'QUESTION', html_entity_decode(i18n('You have unsaved changes.'), ENT_COMPAT | ENT_HTML401, cRegistry::getEncoding()));
        $oTemplate->set('s', 'BACKEND_URL', cRegistry::getBackendUrl());

        $oTxtEditor = new cHTMLTextarea($pTextareaName, $pTextareaContent);
        $oTxtEditor->setId($pTextareaName);
        $oTxtEditor->setClass(htmlentities($this->_sEditorName));

        $oTxtEditor->setStyle("width: " . $this->_aSettings["width"] . "; height: " . $this->_aSettings["height"] . ";");

        $sReturn = $oTemplate->generate($cfg['path']['all_wysiwyg'] . $this->_sEditor . "contenido/templates/template.tinymce_tpl.html", true);
        $sReturn .= $oTxtEditor->render();

        return $sReturn;
    }
Wer den Image- und Filebrowser von Contenido nutzen möchte: Ist auch recht easy :-)
Wolfgang Wöhrle MEDIA
Freudenstädter Str. 86
72275 Alpirsbach
mail@wolfgangwoehrle.de | www.wolfgangwoehrle.de

McHubi
Beiträge: 1209
Registriert: Do 18. Nov 2004, 23:06
Wohnort: Mettmann
Kontaktdaten:

Re: TinyMCE im Plugin-Backend

Beitrag von McHubi » Do 10. Mär 2016, 15:41

:D Danke Wolfgang!
seamless-design.de
"Geht nicht!" wohnt in der "Will nicht!"-Strasse.

Das Handbuch zur Version 4.10: CONTENIDO für Einsteiger (4.10)

Das Handbuch zur Version 4.9: CONTENIDO für Einsteiger (4.9)

Antworten