RTE im Frontend benutzen

Um den RTE im Frontend z.B. in einem Formular zu benutzen, wird die Klasse pi2 der rtehtmlarea benötigt, sie muss zuerst eingebunden werden

require_once(t3lib_extMgm::extPath('rtehtmlarea').'pi2/class.tx_rtehtmlarea_pi2.php');

Folgende Variablen werden am Anfang der Klasse definiert:

TypoScript
/* RTE vars */
var $RTEObj;
var $strEntryField;
var $docLarge = 0;
var $RTEcounter = 0;
var $formName;
var $additionalJS_initial = '';		// Initial JavaScript to be printed before the form (should be in head, but cannot due to IE6 timing bug)
var $additionalJS_pre = array();	// Additional JavaScript to be printed before the form
var $additionalJS_post = array();	// Additional JavaScript to be printed after the form
var $additionalJS_submit = array();	// Additional JavaScript to be executed on submit
var $PA = array(
            'itemFormElName' =>  '',
            'itemFormElValue' => '',
);
var $specConf = array();
var $thisConfig = array();
var $RTEtypeVal = 'text';

Für den RTE werden 3 Javaskripte eingefügt nach folgendem Muster:

###ADDITIONALJS_PRE###
<form action="" method="post" onsubmit="###ADDITIONALJS_SUBMIT###">
...
</form>
###ADDITIONALJS_POST###

Die komplette Beispielklasse sieht wie folgt aus, unten gibt es die komplette Demoextension als Download.

PHP
<?php
/***************************************************************
*  Copyright notice
*
*  (c) 2007  <>
*  All rights reserved
*
*  This script is part of the TYPO3 project. The TYPO3 project is
*  free software; you can redistribute it and/or modify
*  it under the terms of the GNU General Public License as published by
*  the Free Software Foundation; either version 2 of the License, or
*  (at your option) any later version.
*
*  The GNU General Public License can be found at
*  http://www.gnu.org/copyleft/gpl.html.
*
*  This script is distributed in the hope that it will be useful,
*  but WITHOUT ANY WARRANTY; without even the implied warranty of
*  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
*  GNU General Public License for more details.
*
*  This copyright notice MUST APPEAR in all copies of the script!
***************************************************************/
 
require_once(PATH_tslib.'class.tslib_pibase.php');
require_once(t3lib_extMgm::extPath('rtehtmlarea').'pi2/class.tx_rtehtmlarea_pi2.php'); //RTE      
 
 
/**
 * Plugin 'RTE Test' for the 'test_rtefe' extension.
 *
 * @author	 <>
 * @package	TYPO3
 * @subpackage	tx_testrtefe
 */
class tx_testrtefe_pi1 extends tslib_pibase {
	var $prefixId      = 'tx_testrtefe_pi1';		// Same as class name
	var $scriptRelPath = 'pi1/class.tx_testrtefe_pi1.php';	// Path to this script relative to the extension dir.
	var $extKey        = 'test_rtefe';	// The extension key.
	var $pi_checkCHash = true;
	
    /* RTE vars */
	var $RTEObj;
    var $strEntryField;
    var $docLarge = 0;
    var $RTEcounter = 0;
    var $formName;
    var $additionalJS_initial = '';		// Initial JavaScript to be printed before the form (should be in head, but cannot due to IE6 timing bug)
	var $additionalJS_pre = array();	// Additional JavaScript to be printed before the form
	var $additionalJS_post = array();	// Additional JavaScript to be printed after the form
	var $additionalJS_submit = array();	// Additional JavaScript to be executed on submit
    var $PA = array(
            'itemFormElName' =>  '',
            'itemFormElValue' => '',
            );
    var $specConf = array();
    var $thisConfig = array();
    var $RTEtypeVal = 'text';
    
	/**
	 * The main method of the PlugIn
	 *
	 * @param	string		$content: The PlugIn content
	 * @param	array		$conf: The PlugIn configuration
	 * @return	The content that is displayed on the website
	 */
	function main($content,$conf)	{
		$this->conf=$conf;
		$this->pi_setPiVarDefaults();
		$this->pi_loadLL();
		
        $this->RTEObj = t3lib_div::makeInstance('tx_rtehtmlarea_pi2');
        $this->formName = 'prexperts';
        
        
	    $this->RTEcounter++;
		$this->formName = 'rtetestform';
		$this->strEntryField = 'description';
		$this->PA['itemFormElName'] = 'tx_cal_controller[description]';
		$this->PA['itemFormElValue'] = '';
		$this->thePidValue = $GLOBALS['TSFE']->id;
		$RTEItem = $this->RTEObj->drawRTE($this,'',$this->strEntryField,$row=array(), $this->PA, $this->specConf, $this->thisConfig, $this->RTEtypeVal, '', $this->thePidValue);
		$sims['###ADDITIONALJS_PRE###'] = $this->additionalJS_initial.'
			<script type="text/javascript">'. implode(chr(10), $this->additionalJS_pre).'
			</script>';
		$sims['###ADDITIONALJS_POST###'] = '
			<script type="text/javascript">'. implode(chr(10), $this->additionalJS_post).'
			</script>';
		$sims['###ADDITIONALJS_SUBMIT###'] = implode(';', $this->additionalJS_submit);
        
		$content='
			<strong>This is a few paragraphs:</strong><br />
			<p>This is line 1</p>
			<p>This is line 2</p>
	
			<h3>This is a form:</h3>'.$sims['###ADDITIONALJS_PRE###'].'
			<form name="rtetestform" action="'.$this->pi_getPageLink($GLOBALS['TSFE']->id).'" method="POST" onsubmit="'.$sims['###ADDITIONALJS_SUBMIT###'].'">
				<input type="hidden" name="no_cache" value="1">
                '.$RTEItem.'
                
				<input type="submit" name="'.$this->prefixId.'[submit_button]" value="'.htmlspecialchars($this->pi_getLL('submit_button_label')).'">
			</form>'.$sims['###ADDITIONALJS_POST###'] .'
			<br />
			<p>You can click here to '.$this->pi_linkToPage('get to this page again',$GLOBALS['TSFE']->id).'</p>
		';
	
		return $this->pi_wrapInBaseClass($content);
	}
}
 
 
 
if (defined('TYPO3_MODE') && $TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/test_rtefe/pi1/class.tx_testrtefe_pi1.php'])	{
	include_once($TYPO3_CONF_VARS[TYPO3_MODE]['XCLASS']['ext/test_rtefe/pi1/class.tx_testrtefe_pi1.php']);
}
 
?>

Die Beispielextension

This is a few paragraphs:

This is line 1

This is line 2

This is a form:

Der Editor wird geladen. Bitte warten...

You can click here to get to this page again

11 Kommentare
#9 arthur grohe schrieb am 28.10.2011 12:08

Hallo,

danke für das Tutorium, hat sehr geholfen.

Es fehlt jetzt allerdings noch der nächste, sehr wichtige Schritt:

Speichern bzw. Auslesen des Inhalts des RTEs!

Bitte bitte noch ein Artikel darüber machen

 

Mfg Arthur

#10 arthur g schrieb am 28.10.2011 16:42

Da ist ein FEHLER im rtehmlarea editor!!!

In der ursprünglichen version wird ein

<input type="hidden"> Feld benutzt um den content des editors zu Speichen, der htmlarea-editor erzeugt aber lieber ein <textarea> Feld.

Das Problem: Er erzeugt immernoch das <input hidden> Feld mit dem gleichen "name"-attribut sodass später beim submit nur das hidden Feld übertragen wird, wo standardmäßig value="RTE" drinsteht!!!

Habe für mich ein workaround gebaut, dann gings...

nur zur Info für andere die sich damit abquälen Mr. Green

#11 Reinhold Gräbe schrieb am 20.01.2013 09:37

Hallo Arthur,

ich bin ein blutjunger Anfänger was Typo3 betrifft. Bin schon einigermaßen weit gekommen, jedoch auf das gleiche Problem wie Du gestoßen. Konntest Du bereits alles lösen und könntest Du mich unterstützen?

 

Schöne Grüße

Reinhold

#7 Gordon schrieb am 30.08.2011 18:24

Hi Steffen,

 

Was hat sich hinsichtlich TYPO3 4.5.* geändert hatte eine Ext. in einer Live Umgebung wo ich mehrere RTE anlaufen hatte im Frontend mit verschieben und ausblenden,

nun ein Update wurde ja auch Zeit auf 4.5.3 und nun will er nicht mehr der libe RTE Frown

 

Was tun

#8 arltkh schrieb am 28.10.2011 11:22

Hi Leutz,

 

ich hatte das Problem, dass beim Chrome und Safari immer das Loading gif angezeigt wurde, nur im kampferprobten Firefox gings.

Allerdings wurde die Statusleiste nicht richtig angezeigt, d.h. Icons/Buttons haben sich überschnitten etc. Und am Anfang musste man einmal auf die Ecke rechts unten klicken, damit überhaupt eine Eingabe möglich war....

 

Frage: Wie kann man den RTE vernünftig konfigurieren???

#6 Lars schrieb am 09.08.2011 12:09

Cool vielen Dank für diesen Beitrag.

Ich weiß nicht was ich falsch gemacht habe, hatte den Code nicht 1zu1 übernommen und der Editor blieb im -bitte warten- hängen.

 

Mit der Seite aus dem Ext Manual kam ich dann an Ziel typo3.org/documentation/document-library/extension-manuals/rtehtmlarea/1.4.4/view/6/2/

 

weiter so

liebe Grüße Lars

#5 Dieter Kühlborn schrieb am 08.09.2010 23:18

Hallo,

 

ich habe mich ebenfalls mit der Programmierung von RTE im Frontend auseinander gesetzt. Leider habe ich das gleiche Problem wie Christian Endlich. Ich bekomme die Eingaben vom RTE nicht ausgelesen.

 

Was muss ich hier ausführen, damit ich die Daten in die Datenbank speichern kann.

 

Zurzeit frage ich die Daten wie folgt ab:

 

if ($this->piVars['submit_button']) {

if($this->RTEObj->isAvailable()) {

$pageTSC $GLOBALS['TSFE']->getPagesTSconfig();

$RTEsetup = $pageTSConfig['RTE.'];

$this->thisC $RTEsetup['default.'];

$this->thisC $this->thisConfig['FE.'];

$dataArray['description'] = $this->RTEObj->transformContent(

'db',$dataArray['description'],

'tx_cal_controller',

'description',$dataArray,$this->specConf,$this->thisConfig,'',$this->thePidValue);

}

$content .= $GLOBALS['TYPO3_DB']->INSERTquery('tx_cal_controller', $dataArray).'
';

$content.='ok button
';

}

 

Ich hoffe, dass ich hier eine Antwort erhalte.

 

Viele Grüße

 

Dieter

#3 Christian Endlich schrieb am 30.09.2008 17:14

Hallo, vielen Dank für dieses tutorial und Code-Schnippsel die ich bereits erfolgreich in meinem code verweden kann.

Eins blieb mir jedoch noch im Ungewissen. Wie kann ich die Eingabe per POST abfangen. In dem Beispiel hier bleibt "[tx_cal_controller] => Array ( [_TRANSFORM_description] => RTE [description] => ) [senden] => senden )" immer leer. Ich komme einfach nicht an die gewünschten Infos aus dem RTE-Feld.....

#4 Christian Endlich schrieb am 30.09.2008 18:06

Hat sich erledigt. doch nun ist ein weiteres Problem aufgetaucht. Alle Bilder die der FE-Nutzer nun im RTE einfügt über die Linkadresse wird im Frontend später nicht richtig angeziegt.

 

Folgendes Szenario. FE User loggt sich ein und gibt Veranstaltungen ein. Er fügt auch von seiner eigenen Homepage Bilder übder die BILDEINFÜGENFUNKTION ein. Speichert ab. Die Link URL wird aber irgendwie nicht übernommen.....

#2 Thomas schrieb am 03.08.2007 08:40

Danke für das Tutorial. Allerdings wird (bei mir) der RTE nur in seiner Grundkonfiguration ausgegeben.

 

Weiss jemand

- wie man den RTE aus einem FE-Plugin konfiguriert

- ob man den Backend-Filebrowser einbinden kann, um z.B. Bilder einzubinden und Dateien zu verlinken

#1 Andreas Kiefer schrieb am 13.07.2007 13:44

Hallo Steffen,

danke für diese Anleitung, das funktioniert generell sehr gut. Allerdings habe ich folgendes Problem:

Wenn ich Daten über den RTE im BE eingebe sind Zeilenumbrüche, Absätze etc. alles in Ordnung. Wenn ich diesen im BE angelegten Datensatz dann über meine Extension im FE-RTE öffne, sind alle Absätze weg. Wie kann ich das abstellen? Hast Du eine Lösung hierfür? Vielen Dank im Voraus!

einen Kommentar schreiben
Typo3