kostenloser Webspace werbefrei: lima-city

Problem bei WYSIWYG-Editor

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   squid

   

   squid hat kostenlosen Webspace.

   20:47, 27.4.2010

   Hi,
   ich hab mal versucht, nen WYSIWYG-Editor zu erstellen. Hier das Script:
   
   IFrame:
   

   <iframe
   	id="editorWindow"
   	src="blank.htm"
   	onload="this.contentDocument.designMode='on';"
   	frameborder="0" framespacing="0" border="0"
   	width="80%"
   	height="83%"
   ></iframe>

   
   
   Javascript:
   

   <script language="JavaScript">
   	<!--
   	 function doRichEditCommand(aName, aArg){
   	   getIFrameDocument('editorWindow').execCommand(aName,false, aArg);
   	   document.getElementById('editorWindow').contentWindow.focus()
   	 }
   	//-->
   	</script>

   
   
   Formatierungsbutton:
   

   <button onclick="doRichEditCommand('bold')" style="font-weight:bold;">B</button>

   
   
   So. Jetzt funktioniert aber der Button nicht, bzw. nichts ändert sich.
   Kann mir vielleicht jm. helfen?
   
   PS: Wenn ich schon mal bei JS bin, da hab ich noch ne frage:
   wie kann man einstellen, dass dort, wo man klickt, zwar dieser Liste kommt (Zurück, Vor, Neu Laden, Seitenqualltext anzeigen usw), nur das die Beschriftung und die Links von mir definiert sind?
   
   
   LG Squid

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. m**********n

   20:58, 27.4.2010

   function doRichEditCommand(aName, aArg){
   

   
   es werden zwei parameter verlangt, du gibst aber nur einen an:
   

   onclick="doRichEditCommand('bold')"

4. postkarten

   postkarten hat kostenlosen Webspace.

   22:06, 30.4.2010

   Hier gibt es ein sehr gute Infos über Richt Text Editors in Firefox (und auch Probleme und Unterschiede zum Internet Explorer):
   https://developer.mozilla.org/en/Rich-Text_Editing_in_Mozilla
   
   Schöne Grüße
   Joe

5. nemoinho

   

   nemoinho hat kostenlosen Webspace.

   1:11, 1.5.2010

   bezüglich deiner 2. Frage, selbst einstellen kann man da gar nichts, man kann nur selbst versch. andere Menüs einbauen, so wie das bei google-maps ist, wenn man da mit rechts in die Karte klickt.
   Hier mal eine kleine Funktion dafür (unten dann die Erklärung dazu):

   var mouseMenu = function(pop, trigger, mouseKey, ret){
   	if(!pop)throw Error('Keine Variable pop deklariert!');
   	var w = window,d = w.document; // Nur wegen der geschw.
   	if(!pop.nodeName) pop = d.getElementById (pop);
   	if(trigger && !trigger.nodeType)trigger = d.getElementById(trigger);
   	if(mouseKey == 'left')mouseKey = 1;
   	if(mouseKey == 'right')mouseKey = 3;
   	if(!mouseKey || typeof mouseKey != 'number')mouseKey = 3;
   	var mousedown = function(e){
   		e = e || window.event;
   		var obj = e.target || e.srcElement;
   		while(obj != trigger && obj != d.body) obj = obj.parentNode;
   		if(e.which == mouseKey && (!trigger || obj == trigger)){
   			if(mouseKey == 3)typeof con == 'function' && con(e);
   			else typeof clk == 'function' && clk(e);
   			var top = e.clientY + (w.pageYOffset || d.documentElement.scrollTop || d.body.scrollTop),
   				left =  e.clientX + (w.pageXOffset || d.documentElement.scrollLeft || d.body.scrollLeft);
   			pop.style.top = top+'px';
   			pop.style.left = left+'px';
   			pop.style.position = 'absolute';
   			pop.style.zIndex = '10000';
   			d.body.appendChild(pop);
   			return ret ? true : false;
   		}
   	};
   	var con = w.oncontextmenu, clk = d.onclick;
   	if(mouseKey == 3)w.oncontextmenu = mousedown;
   	else d.onclick = mousedown;
   };

   
   Diese Funktion macht das was du da wolltest, der erste Parameter ist eine Box die angezeigt werden soll, die kann auch schon im HTML enthalten sein, dann muss man auch nur noch dessen ID an die Funktion übergeben werden.
   Der 2. Parameter ist optional und man kann hier ein Element der Seite bestimmen, auf dessen Ereignis es überhaupt nur reagieren soll, das ist ganz nützlich wenn man nur ein Menu über einem bestimmten Teil der Seite zeigen will.
   Danach kann man bestimmen, für welche Taste das ganze gelten soll, voreinstellung ist die rechte, um die linke auszuwählen muss man da nur eine 1 angeben.
   Schließlich kommt ein Parameter der angibt, wie der Rückgabewert aussehen soll (true oder false), hier ist die voreinstellung auch false, wenn es umgestellt wird und der 3. Parameter auf 3 (rechte Maustaste) steht, dann erscheint das BrowserContextMenu zusätzlich zu deinem eigenen, ich hab hier mal 2 Beispiele gemacht.

   var div = document.createElement('div');
   div.style.width='2em';
   div.style.height='2em';
   div.style.backgroundColor='#f40';
   mouseMenu(div);

   hier wird ein div erstellt, 2x2em groß gemacht, orange gefärbt und dann an die Funktion übergeben, überall wo man jetzt mit rechts hinklickt wandert auch der Kasten hin!

   <p id="pop-men">Foo<br />Bar</p>

   In diesem Beispiel soll das HTML so auch im HTML stehen, und dann mit der Funktion aufgerufen werden:

   mouseMenu('pop-men','wrapper',1,true);

   So hier ist die Funktion dann voll beschäftigt, sie verschiebt den Absatz 'pop-men' immer dahin, wo mit links geklickt wurde, aber nur wenn das innerhalb eines Elements mit der Id 'wrapper' war und wenn durch den Klick auch ein Verweis ausgeführt worden wäre, so wird dieser auch ausgeführt, sprich die links sind nicht tot, nur weil die Funktion die klicks abfängt.
   
   Das alles könnte etwas verwirrend sein, zumindest für die jenigen die nicht so tief in JS drin stecken, aber ich stehe gerne für Fragen bereit und würde mich auch über etwailige Fehleransprachen freuen.
   
   Beitrag zuletzt geändert: 1.5.2010 1:19:33 von nemoinho

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?