Seite 1 von 1

WYSIWYG - Editor die x.te

Verfasst: Sa 28. Sep 2002, 09:30
von arillus
:?:
In welchem File liegt der WYSIWYG Editor?
Würde diesen gerne um weitere funktionen erweitern (=> siehe WYSIWYG Editor bei PHPnuke.

Der Test Editor von Björn gefällt mir nicht ganz so gut, weil er HTML Tags dazuschreibt und nicht als WYSIWYG hinterlässt.

Verfasst: Sa 28. Sep 2002, 10:27
von ekke
Wäre es nicht vielleicht eine Überlegung die BB-Codes zu nehmen? Erweitert vielleicht mit h1 etc.? Die funktionieren besser, da der Datenbankeintrag immer mit Start und Endtag versehen ist, dann läßt es sich leichter in andere Formate übersetzen (pdf) img in html hat keinen endtag.

Entsprechende Einzelklassen gibt es.

Gruss ekke

Verfasst: So 29. Sep 2002, 00:29
von Björn
@arillus:
Also auch mal zum xten mal ( :) )
Sourcepad ist nicht für wysiwyg konzepiert und wird deshalb dort auch nie zum Einsatz kommen. Bei Templatedesign, Modulinput/ output sieht das schon anders aus... aber nicht vor 2003

Der Editor liegt in der Datei contenido/tpl/tplInputField_CMS_HTML.inc.php .

@ekke:

Nein, ich denke das geht nicht. Damit das effektiv funktioniert, muß das durchs gesamte System geschehen. Gerade bei properieren Sachen wie dem MS-wysiwyg- Editor stößt das auf Grenzen.

Meine Idee wäre, das html im frontend abzugeifen und dann alle Tags gegen abstakte Tags auszutauschen -> zB <b>blabla</b> wird zu [*bold_start*]blabla[*bold_end*].

Das ganze wird mit Regexen gemacht, praktisch wie beim Compilerbau.
Ist das abgeschlossen, werden umbekannte Tags einfach gestrippt.

Das abstrakte, definierte Format kann nun von verschiedenen Containerklassen angesprochen werden und in das entsprechende Format umgewandelt werden.

Zb gibt es die Klassen:

class.container_pdf.php
class.container_xml.php
class.container_txt.php

Die Hauptklasse konvertiert das dann ins entsprechende Format:
ZB

Code: Alles auswählen

class convert extends container_xml
{
   function do_stuff()
   {
       ....
       return $converted;
   }
}
Die Arbeit wäre natürlich enorm, aber das Ergebnis im Endeffekt allgemeingültig und damit sogar auf jede beliebige HTML- Seite anwendbar.


Gruß Björn

Verfasst: So 29. Sep 2002, 08:50
von ekke
@björn

Mit den Klassen, der Ansatz ist soweit gut, aber das Problem ist der WYSIWYG-Editor, damit ist Contenido browserabhängig und zwar nur IE und das ist schlecht. Die Möglichkeiten in HTML über IE sind sehr beschränkt. Bis jetzt noch kein span, class etc möglich, Schriftgrößen werden über fonts definiert:

Code: Alles auswählen

<SPAN class=tbButton id=DECMD_FONTSIZE title="Font3" onclick="format('fontsize','3');"><IMG class=tbIcon height=22 src="<? print $ContenidoPath.$cfgPathImg ?>wysiwyg_fonta.gif" width=23></SPAN>
<SPAN class=tbButton id=DECMD_FONTSIZE title="Font4" onclick="format('fontsize','4');"><IMG class=tbIcon height=22 src="<? print $ContenidoPath.$cfgPathImg ?>wysiwyg_fontb.gif" width=23></SPAN>
Einen HTML-Stripper und Ersetzer zu nutzen ist doppelt gemoppelt, das html muß ja erst gar nicht erstellt werden. In der Datenbank muß kein Html stehen.

Außerdem, wenn Du hier im Forum aus Vorschau drückst, dann siehst Du, was Du bekommst.

Dann reicht so eine kleine Funktion und Du hast html:

Code: Alles auswählen

function CodeDecode($text){
		$patterns = array();
		$replacements = array();
		$patterns[] = "/\[url=(['\"]?)(http[s]?:\/\/[^\"']*)\\1](.*)\[\/url\]/sU";
		$replacements[] = "<a href='\\2' target='_blank'>\\3</a>";
		$patterns[] = "/\[url=(['\"]?)([^\"']*)\\1](.*)\[\/url\]/sU";
		$replacements[] = "<a href='http://\\2' target='_blank'>\\3</a>";
		$patterns[] = "/\[color=(['\"]?)([^\"']*)\\1](.*)\[\/color\]/sU";
		$replacements[] = "<span style='color: #\\2;'>\\3</span>";
		$patterns[] = "/\[size=(['\"]?)([^\"']*)\\1](.*)\[\/size\]/sU";
		$replacements[] = "<span style='font-size: \\2;'>\\3</span>";
		$patterns[] = "/\[font=(['\"]?)([^\"']*)\\1](.*)\[\/font\]/sU";
		$replacements[] = "<span style='font-family: \\2;'>\\3</span>";
		$patterns[] = "/\[email]([^\"]*)\[\/email\]/sU";
		$replacements[] = "<a href='mailto:\\1'>\\1</a>";
		$patterns[] = "/\[b](.*)\[\/b\]/sU";
		$replacements[] = "<b>\\1</b>";
		$patterns[] = "/\[i](.*)\[\/i\]/sU";
		$replacements[] = "<i>\\1</i>";
		$patterns[] = "/\[u](.*)\[\/u\]/sU";
		$replacements[] = "<u>\\1</u>";
		//$patterns[] = "/\[li](.*)\[\/li\]/sU";
		//$replacements[] = "<li>\\1</li>";
		$patterns[] = "/\[img align=(['\"]?)(left|right)\\1]([^\"\(\)\?\&]*)\[\/img\]/sU";
		$replacements[] = "<img src='\\3' align='\\2' alt'/' />";
		$patterns[] = "/\[img]([^\"\(\)\?\&]*)\[\/img\]/sU";
		$replacements[] = "<img src='\\1' alt'/' />";
		$text = preg_replace($patterns, $replacements, $text);
		$text = str_replace("[quote]", "<div style='text-align:left;width:85%;'><small>"._QUOTEC."</small><hr /><small><blockquote>", $text);
		$text = str_replace("[/quote]", "</blockquote></small><hr /></div>", $text);
		//$text = str_replace("[ul]","<ul>",$text);
		//$text = str_replace("[/ul]","</ul>",$text);
		//$text = str_replace("[hr]","<hr />",$text);
		return $text;
	}
um pdf oder dynamisches Flash zu bekommen dann ähnlich.
Um eine mit Tabellen erstellte Html-Seite umzuwandeln gibt es bis jetzt nur eine Software, die extra auf dem Server installiert werden muß. Damit fallen alle günstigen Hosting-Angebote weg.

Für die Umsetzung gäbe es dann:
Layout html
Layout pdf
Layout flash
Layout txt
Layout xml
Layout wap
Layout i-mode
usw.

Eine Quelle roh und die entsprechenden Parser.

Die Schwierigkeit bei der Modulerstellung wäre nur, man kann nur reduziert <td>s etc. einsetzen.

Was für Cod ist da?

Die html-Klasse von fpdf, mit dem ich gerne arbeite, kann das nicht, kann aber

Code: Alles auswählen

class PDF extends FPDF
{
var $B;
var $I;
var $U;
var $HREF;

function PDF($orientation='P',$unit='mm',$format='A4')
{
	//Call parent constructor
	$this->FPDF($orientation,$unit,$format);
	//Initialization
	$this->B=0;
	$this->I=0;
	$this->U=0;
	$this->HREF='';
}

function WriteHTML($html)
{
	//HTML parser
	$html=str_replace("\n",' ',$html);
	$a=preg_split('/<(.*)>/U',$html,-1,PREG_SPLIT_DELIM_CAPTURE);
	foreach($a as $i=>$e)
	{
		if($i%2==0)
		{
			//Text
			if($this->HREF)
				$this->PutLink($this->HREF,$e);
			else
				$this->Write(5,$e);
		}
		else
		{
			//Tag
			if($e{0}=='/')
				$this->CloseTag(strtoupper(substr($e,1)));
			else
			{
				//Extract properties
				$a2=split(' ',$e);
				$tag=strtoupper(array_shift($a2));
				$prop=array();
				foreach($a2 as $v)
					if(ereg('^([^=]*)=["\']?([^"\']*)["\']?$',$v,$a3))
						$prop[strtoupper($a3[1])]=$a3[2];
				$this->OpenTag($tag,$prop);
			}
		}
	}
}

function OpenTag($tag,$prop)
{
	//Opening tag
	if($tag=='B' or $tag=='I' or $tag=='U')
		$this->SetStyle($tag,true);
	if($tag=='A')
		$this->HREF=$prop['HREF'];
	if($tag=='BR')
		$this->Ln(5);
}

function CloseTag($tag)
{
	//Closing tag
	if($tag=='B' or $tag=='I' or $tag=='U')
		$this->SetStyle($tag,false);
	if($tag=='A')
		$this->HREF='';
}

function SetStyle($tag,$enable)
{
	//Modify style and select corresponding font
	$this->$tag+=($enable ? 1 : -1);
	$style='';
	foreach(array('B','I','U') as $s)
		if($this->$s>0)
			$style.=$s;
	$this->SetFont('',$style);
}

function PutLink($URL,$txt)
{
	//Put a hyperlink
	$this->SetTextColor(0,0,255);
	$this->SetStyle('U',true);
	$this->Write(5,$txt,$URL);
	$this->SetStyle('U',false);
	$this->SetTextColor(0);
}
}

$html='You can now easily print text mixing different
styles : <B>bold</B>, <I>italic</I>, <U>underlined</U>, or
<B><I><U>all at once</U></I></B>!<BR>You can also insert links
on text, such as <A HREF="http://www.fpdf.org">www.fpdf.org</A>,
or on an image: click on the logo.';

$pdf=new PDF();
$pdf->Open();
//First page
$pdf->AddPage();
$pdf->SetFont('Arial','',20);
$pdf->Write(5,'To discover what\'s new in this tutorial, click ');
$pdf->SetFont('','U');
$link=$pdf->AddLink();
$pdf->Write(5,'here',$link);
$pdf->SetFont('');
//Second page
$pdf->AddPage();
$pdf->SetLink($link);
$pdf->Image('logo.png',10,10,30,0,'','http://www.fpdf.org');
$pdf->SetLeftMargin(45);
$pdf->SetFontSize(14);
$pdf->WriteHTML($html);
$pdf->Output();
?>
oder umgebaut die entsprechenden BB-Tags
und die Datenbank bleibt sauber, nur echte Tags mit anfang und ende sind drin:

Code: Alles auswählen

[b]Hallo Björn[/b]
Auch lassen sich leichter Multibyte verarbeiten:

???? ????????

????????10????

??????2?????

?????? ????60?

????????????


oh das Forum schafft keine :(

Code: Alles auswählen

ËÜÆü¤Ï½ÐÉÊ¥·¥¹¥Æ¥àÎÁ̵ÎÁ¡ª ¥ª¡¼¥¯¥·¥ç¥ó
Reicht so eine WYSIWYG-Funktion wie hier im Forum nicht aus?

Gruss ekke

Verfasst: So 29. Sep 2002, 20:28
von Björn
@ekke

aha, jetzt versteh ich Deinen Ansatz.
aber das Problem ist der WYSIWYG-Editor, damit ist Contenido browserabhängig und zwar nur IE und das ist schlecht.
Das Problem ist, dass momentan alles in Contenido auf HTML beruht. Wenn das sauber implementiert werden soll, denke ich , führt kein Weg an XML vorbei. Dies würde bedeuten, dass Contenido von grund auf neu programmiert werden muß. Vor der Version 5.0 sehe ich da keine Möglichkeit. Hinzu kommt noch, dass andere WYSIWYG- Editoren in Planung sind. Da hätten wir einen Editor, der auf XUL (Mozilla) basiert und einen, den man in Java mit Hilfe von Swing oder dem AWT realisieren könnte.

Einen HTML-Stripper und Ersetzer zu nutzen ist doppelt gemoppelt, das html muß ja erst gar nicht erstellt werden.
Momentan doch, wenn das html weiterverarbeiten will, müssen Standards her, an denen man sich orientieren kann. Das komplette HTML, XHTML, CSS, JavaScript in ein einhaltliches bb-Code Format zu bringen, halte ich für utopisch.


Trotzdem muß ich sagen, dass ich Deine Idee ziemlich gut finde. Im kleineren Kreis kann das sicherlich realisiert werden.

Wenn Du Sourcepad als Grundlage nehmen willst, kannst Du das gerne tun. bb-Code Tags kannst Du dort einfach implementieren, indem Du ein neues Templateset definierst und die HTML- Ersetzungen einfach gegen bb-code austauscht.
Dann noch eine neue CMS-variable definieren, wie Du es schon bei CMS_ZIP, etc gemacht hast und das Ding läuft schon fast. Dann kannst Du auch einen PDF- Export anbieten. Sachen, die Du noch nicht unterstützen willst, kannst Du ja einfach über die Sourcepad- Konfiguration rausschmeißen (z.B. Tabellen, Listen, etc.).

Gruß Björn