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

C

christoph lindtner

Mitglied
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
 
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:

Code: 
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:

PHP: 
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
 
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
 
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
 
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();
Zum Vergrößern anklicken....

mfg
infowilli
 
ich hab jetzt das image script ein bissi umgebaut:

Code: 
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
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück