wysiwyg => Bildpfad verändert sich, leider :(

[christoph lindtner]

Hallo zusammen,

Für ein kleines Projekt habe ich mir vorgenommen einen wysiwyg editor zu programmieren.

Jedoch hänge ich zurzeit an einem gravierendem Problem:

Wenn ich ein Bild einfüge (per execCommand) und dieses nicht bewege wird der richtige Pfad im html ausgegeben.

Wenn ich jedoch das Bild selektiere und verschiebe wird vor dem Pfad ein "about:blank" eingefügt und das Bild verschwindet. Leider habe ich keinen Plan warum und wie man das abschalten kann.

Ich hab das ganze Forum durchsucht und auch newsgroups und google komplett durchforstet, bin aber nur auf unbeantwortete postings gestoßen.

Hat jemand eine Idee wie man das ändern kann so das nur z.B.: "/images/...." und nicht "about:blank/images/...:" steht

Vielen Dank im Voraus.....

mfg

 

[Andreas Gaisbauer]

Der Code bzw ein Online Beispiel wäre hilfreich

 

[christoph lindtner]

online beispiel gibts noch nicht wirklich, da noch alles in der Entstehungsphase ist.

Aber hier sind ein paar Code-Fragmente:

zuerste einmal die JavaScript Datei:

function wysiwyg_init(editor) {
	if (!wysiwyg_editor_registered(editor)) {
		
		// editor regestrieren
		wysiwyg_editor[wysiwyg_editor.length] = editor;
		
		this[editor+'_wEdit'].document.designMode = 'On';
		
	}
}

function wysiwyg_edit(editor, cControl) {
	window.frames[editor+'_wEdit'].focus();
	this[editor+'_wEdit'].document.execCommand(cControl, false, null);
}

function wysiwyg_insert_image(editor) {
	window.frames[editor+'_wEdit'].focus();
	var imgSrc = showModalDialog('image_library.php', '', 'dialogHeight:200px; dialogWidth:450px; resizable:no; status:no');
	
	if (imgSrc != null) {
		this[editor+'_wEdit'].document.execCommand('insertimage', false, imgSrc);
	}
}

function wysiwyg_insert_hyperlink(editor) {
	window.frames[editor+'_wEdit'].focus();
	var l = this[editor+'_wEdit'].document.execCommand('createlink');
}


function wysiwyg_html_tab(editor) {
	
	// Daten in das Textfeld übertragen
	var iHTML = this[editor+'_wEdit'].document.body.innerHTML;
	document.all[editor].value = iHTML;
	
	// Editor wechseln
	document.all[editor+'_wEdit'].style.display = 'none';
	document.all[editor].style.display = 'inline';
	document.all[editor].focus();
	
}

und hier is noch der php Code:

function setHtml () {
		$name = $this->control_name;
		
		if ($this->checkBrowser()) {

		/*------------------------------- setup wysiwyg editor ---------------------------------*/
			$html .= '<link rel="stylesheet" type="text/css" href="css.wysiwyg_toolbar.css">';
			$html .= '<script language="JavaScript" src="js.wysiwyg_control.php"></script>';
			$html .= '<script language="JavaScript" src="js.wysiwyg_toolbar.php"></script>';
			$html .= '<table width="'.$this->getWidth().'" cellpadding="0" cellspacing="0" border="0">';
			$html .= '<tr>';
			$html .= '<td align="left" valign="top">';
			$html .= '<img src="images/tb_bold.gif" class="wysiwyg_button_out" onClick="wysiwyg_edit(\''.$name.'\', \'bold\')" onMouseOver="wysiwyg_bt_over(this)" onMouseOut="wysiwyg_bt_out(this)" onMouseDown="wysiwyg_bt_down(this)" onMouseUp="wysiwyg_bt_up(this)" >&nbsp;';
			$html .= '<img src="images/tb_italic.gif" border="0" onClick="wysiwyg_edit(\''.$name.'\', \'italic\')">&nbsp;';
			$html .= '<img src="images/tb_underline.gif" border="0" onClick="wysiwyg_edit(\''.$name.'\', \'underline\')">';
			$html .= '<img src="images/tb_vertical_separator.gif" border="0" style="border: #90aeb9;">&nbsp;';
			$html .= '<img src="images/tb_image_insert.gif" border="0" onclick="wysiwyg_insert_image(\''.$name.'\')">&nbsp;';
			$html .= '<img src="images/tb_hyperlink.gif" border="0" onclick="wysiwyg_insert_hyperlink(\''.$name.'\')">&nbsp;';
			$html .= '<img src="images/tb_html_tab.gif" border="0" onclick="wysiwyg_html_tab(\''.$name.'\')">';
			$html .= '</td>';
			$html .= '</tr>';
			$html .= '<tr><td height="7"></td></tr>';
			$html .= '<tr><td valign="top" align="left" width="100%">';
			$html .= '<textarea id="'.$name.'" name="'.$name.'" style="width:'.$this->getWidth().'; height:'.$this->getHeight().'; display:none;"></textarea>';
			$html .= '<input type="hidden" id="'.$name.'_editor_mode" name="'.$name.'_editor_mode" value="design">';
			$html .= '<iframe id="'.$name.'_wEdit" style="width:'.$this->getWidth().'; height:'.$this->getHeight().';" frameborder="0" onload="wysiwyg_init(\''.$name.'\')"></iframe>';
			
			
			
			$html .= '</td></tr>';
			$html .= '</table>';
			
		}
		else {
			$html = '<textarea  name="'.$n.'" style="width:'.$this->getWidth().'; height:'.$this->getHeight().'">'.htmlspecialchars($this->getValue()).'</textarea>';
		}
	    return $html;
	}

Ich hab mir nebenbei schon einige wysiwyg editoren angeschaut (da ich vorher nicht wirklich wusste wies funktioniert) und irgendwie ist mir bei allen aufgefallen das diese die Bilder alle mit dem http:// pfad abspeichern (zB.: http://www.dies.das/images/das.jpg).... funktioniert das vielleicht gar nicht anders? ich hoff doch.....

mfg

 

[Andreas Gaisbauer]

Also laut MSDN sollte es daran nicht liegen, weil:
"If no path is provided for the image file, the path will default to the location of the current document. "
Werd mich am WE mal genauer damit auseinander setzen...


bye

 

[christoph lindtner]

cool....

Vielen Dank für deine Bemühungen... bin schon gepannt auf deine Antwort....

 

[Andreas Gaisbauer]

Ich habs mir am WE mal angeschaut und muss dir leider mitteilen, das ich auch nicht auf den Fehler gestoßen bin. Sehr komisch die ganze sache - hatte ich so auch noch nicht... Wenn du irgendwie eine Lösung findest, dann poste sie - würd mich interessieren...

bye

 

[infowilli]

Bilddialog fehlt

Hi,

wo is'n der Code von der 'image_library.php',

hast du da auch den window.returnValue = festgelegt, bevor du das Fenster wieder schließt?

du kannst dem window.returnValue auch ein Array an Attributen zuweisen.
so ...auf die Art:

var arrOptions = new Array();
var sBildpfad = document.frmBild.datei.value;
var arrBildname = sBildpfad.split("\\");
var sBildname = arrBildname[arrBildname.length-1];
//alert(sBildname);
arrOptions[0] = sBildname;
arrOptions[1] = document.frmBild.txtAlttext.value;
arrOptions[2] = document.frmBild.cboTextausrichtung.value;
arrOptions[3] = document.frmBild.cboBorder.value;
arrOptions[4] = document.frmBild.txtAbsHorizontal.value;
arrOptions[5] = document.frmBild.txtAbsVertikal.value;
arrOptions[6] = document.frmBild.datei.value;
window.returnValue = arrOptions;
window.close();

mfg
infowilli

 

[christoph lindtner]

ich hab jetzt das image script ein bissi umgebaut:

function WYSIWYG_edit_image_insert(editor) {
	var imgDetails = showModalDialog('<?echo $wysiwygDir; ?>dialog.image_library.php', '', 'dialogHeight:200px; dialogWidth:400px; resizable:no; status:no');

     if (imgDetails != null) {
               window.frames[editor+'_wEdit'].focus();		
               try {	
	  var newimage = '<IMG' 
                                                      +' src="' + imgDetails.src + '" />';
		            +' />';
	alert (newimage);
	 window.frames[editor+'_wEdit'].document.selection.createRange().pasteHTML(newimage);
			
	}
	catch (err) {
	         alert('Ex00003: Unhandled Exception!\nPlease contact the developer');
	}
        }
	WYSIWYG_update_toolbar(editor);
}

bevor ich das Bild einfüge gibt ein alert (alert(newimage)) noch einmal die Bilddaten aus... und bei dieser ist auch der richtige url drinnen, zB. /images/bild1.jpg.

Wenn dann das Bild eingefügt wird mit window.frames....pasteHTML(newimage).... stimmt der Pfad nicht mehr, der schaut dann so aus.... http://venom/images/bild1.jpg ....

habs auch schon probiert mit ".createElement(IMG)" - hat auch nicht funktioniert.... ;(

hab wegen dieser Problematik ein paar Editoren durchgesucht und nur bei einem funktionieren die absoluten Pfade... und das ist der FCK Editor.... nur Blick ich nicht durch wie die das gemacht haben.

Und leider hab ich bis jetzt noch keine Lösung gefunden....

vielleicht weis jemand Rat?

mfg
christoph