hilfe beim javascript code

kalicki2k · 31. Juli 2005

Hallo Leute,

ich hab da mal ein Editor im Internet gefunden. Und nach gebaut.
Hier kann man sich denn mal anschauen:

http://graphicsolution.de/myCMS/editor.php

Und jetzt meine bitte an euch vielleicht kann mir ja jemand den JavaScript code erklären das ich den erweitern kann.

Weil ich noch gerne Schriftart, Schrift Größe und Schriftfarbe dazumachen wollte.
Hier mal mein Code:

Code:

<script language="javascript">
//<!--
var uagent = navigator.userAgent.toLowerCase();
var ie_ok = -1;
var gecko_ok = -1;


if(uagent.indexOf("gecko") && navigator.productSub >= 20030210)
{  gecko_ok=1; }

if(uagent.indexOf("msie") != -1 && uagent.indexOf("opera")== -1 && (uagent.indexOf("msie 5.5") || uagent.indexOf("msie 6.")))
{  ie_ok = 1;  }


function InitToolbarButtons()
{
  kids = document.getElementsByTagName('div');
  for (var i=0; i < kids.length; i++) 
  {
	if (kids[i].className == "imagebutton") 
	{
	  kids[i].onclick = tbclick;
	}
  }
}

function tbmousedown(e)
{
  if(gecko_ok==1)
  {
	e.preventDefault();
  }
}

function tbmouseout(id)
{
  document.images[id].src="mycms/editor/images/buttons/"+ id +"n.gif";
}

function tbmouseover(id)
{
  document.images[id].src="mycms/editor/images/buttons/"+ id +"a.gif";
}

function tbclick()
{
  if(this.id == 'createlink')
  {
	 if(ie_ok == 1)
	 {
	  edit.document.execCommand('createlink'); 
	  edit.focus();
	 }
  
	 if(gecko_ok == 1)
	 {  
	  var szURL = prompt("Enter a URL:", "");
	  document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL);
	 } 
  }
  else
  {
   if(gecko_ok == 1)
   {
	document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
   }
   if(ie_ok == 1)
   {
	edit.document.execCommand(this.id, false, null);
	edit.focus();
   } 
  }
}

function Start()
{
  if(gecko_ok == 1)
  {
	 document.getElementById('edit').contentWindow.document.designMode = "on";
	 try
	 {
	 document.getElementById('edit').contentWindow.document.execCommand("undo", false, null);
	 }
	 catch (e)
	 {
	 gecko_ok = -1;
	 }
  }
}

function processData()
{
  if(ie_ok==1) var htmlCode = edit.document.body.innerHTML;
  if(gecko_ok==1) var htmlCode = document.getElementById('edit').contentWindow.document.body.innerHTML;
  document.form_content.content.value = htmlCode;
  
  if(document.form_content.content.value == '')
  {
	alert('Da is nix drinnen ... das nicht gut!');
	return false;
  }
}
</script>

Gruß
Kalicki2k

T3ch · 31. Juli 2005

Hi;

also in dem Script wir als erstes der Browser des Clients überprüft.

Anschließend werden alle div-Elemente gezählt und wenn diese div-Elemente die Klasse "imagebutton" haben, wird die Funktion tbclick() ausgeführt.

Diese führt in dem iframe-Element den ExecCommand aus. Das Kommando wird über die ID des Elementes, das angeklickt wurde übergeben.

Also musst du, wenn du neue Kommandos einfügen möchtest, diese als Id einfügen.

HTML:

<div class="imagebutton" id="neuesKommando">
	<a href="#"><img src="neuesbild.gif" name="Kommando" title="Kommando" alt="Kommando" class="image"></a>
   </div>

Greetz

kalicki2k · 31. Juli 2005

Danke für die schnelle antwort.
Das mit dem div tag hab ich auch gechackt

aber ich weiß net wenn ich jetzt font size button mache.

Code:

<div class="imagebutton" id="fontsize">
	<a href="#"><img src="neuesbild.gif" name="size" title="Schrift Größe" alt="Schrift Größe" class="image"></a>
   </div>

Wie sag ich dem jetzt das der dann die font tag im hintergrund macht usw...

hatt einer eine idee?

T3ch · 31. Juli 2005

Also falls du zB die Schriftgröße verändern möchtest, musst du das Script ein bisschen abändern:

Code:

function tbclick()
{
  if(this.id ==	'createlink')
  {
     if(ie_ok == 1)
     {
      edit.document.execCommand('createlink'); 
      edit.focus();
     }
  
     if(gecko_ok == 1)
     {  
      var szURL = prompt("Enter a URL:", "");
      document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL);
     } 
  }
  else if(this.id == 'FontSize')
  {
   var size = document.form_content.sizechange.value;
   document.getElementById('edit').contentWindow.document.execCommand("FontSize",false,size);
  }
  else
  {
   if(gecko_ok == 1)
   {
    document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
   }
   if(ie_ok == 1)
   {
    edit.document.execCommand(this.id, false, null);
    edit.focus();
   } 
  }
}

Danach noch das div-Element:

HTML:

   <div class="imagebutton" id="FontSize">
	<select name="sizechange">
         <option>1</option>
         <option>2</option>
         <option>3</option>
         <option>4</option>
         <option>5</option>
         <option>6</option>
         <option>7</option>
        </select>
   </div>

Greetz

kalicki2k · 31. Juli 2005

also echt mal danke es hat geklappt. hat das was mit dem sizechange zu tun. glaub schon und wie sind dann die befehler für fontart oder fontfarbe?

danke

gruß
kalicki

T3ch · 31. Juli 2005

Die ExecCommands lauten:
"FontName" - Schriftart
"ForeColor" - Schriftfarbe

Diese musst du nach dem selben Muster - also sowohl im script als auch im body - einbinden.

Greetz

kalicki2k · 31. Juli 2005

hallo also es klappt net auch mit der schrift größe klappts net der macht die nur ganz kleine wenn ich einmal enn ich nochmal drauf gehe macht der die groß....

hier mal mein code:

Code:

<?php
/*
$file = "mycms/editor/pre_edit.php";
$innerHMTL = "<html><head></head><body>
	 $content
	 </body></html>";
if (!file_exists("$file")) {
 touch("$file"); chmod("$file",0777);
 
}
 $fp = fopen ("$file","w+");
 fwrite ($fp,$innerHMTL);
 fclose($fp);
*/
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="mycms/redaktionsmodus.css" rel="stylesheet" type="text/css">
<style>
.imagebutton {  WIDTH: 20px; HEIGHT: 20px; border:0px; border-color:#FF0000; }
.image	   { WIDTH: 20px; HEIGHT: 20px; }
#edit { border: solid 1px #CDCDCD; }

</style>
<script language="javascript">
<!--
//<!--
var uagent = navigator.userAgent.toLowerCase();
var ie_ok = -1;
var gecko_ok = -1;


if(uagent.indexOf("gecko") && navigator.productSub >= 20030210)
{  gecko_ok=1; }

if(uagent.indexOf("msie") != -1 && uagent.indexOf("opera")== -1 && (uagent.indexOf("msie 5.5") || uagent.indexOf("msie 6.")))
{  ie_ok = 1;  }


function InitToolbarButtons()
{
  kids = document.getElementsByTagName('div');
  for (var i=0; i < kids.length; i++) 
  {
	if (kids[i].className == "imagebutton") 
	{
	  kids[i].onclick = tbclick;
	}
  }
}

function tbmousedown(e)
{
  if(gecko_ok==1)
  {
	e.preventDefault();
  }
}

function tbmouseout(id)
{
  document.images[id].src="mycms/editor/images/buttons/"+ id +"n.gif";
}

function tbmouseover(id)
{
  document.images[id].src="mycms/editor/images/buttons/"+ id +"a.gif";
}

function tbclick()
{
  if(this.id == 'createlink')
  {
	 if(ie_ok == 1)
	 {
	  edit.document.execCommand('createlink'); 
	  edit.focus();
	 }
  
	 if(gecko_ok == 1)
	 {  
	  var szURL = prompt("Enter a URL:", "");
	  document.getElementById('edit').contentWindow.document.execCommand("CreateLink",false,szURL);
	 } 
  }
  else if(this.id == 'FontSize')
  {
   var size = document.form_content.sizechange.value;
   document.getElementById('edit').contentWindow.document.execCommand("FontSize",false,size);
  }
  else if(this.id == 'FontName')
  {
   var font = document.form_content.fontchange.value;
   document.getElementById('edit').contentWindow.document.execCommand("FontName",false,font);
  }
  else
  {
   if(gecko_ok == 1)
   {
	document.getElementById('edit').contentWindow.document.execCommand(this.id, false, null);
   }
   if(ie_ok == 1)
   {
	edit.document.execCommand(this.id, false, null);
	edit.focus();
   } 
  }
}

function Start()
{
  if(gecko_ok == 1)
  {
	 document.getElementById('edit').contentWindow.document.designMode = "on";
	 try
	 {
	 document.getElementById('edit').contentWindow.document.execCommand("undo", false, null);
	 }
	 catch (e)
	 {
	 gecko_ok = -1;
	 }
  }
}

function processData()
{
  if(ie_ok==1) var htmlCode = edit.document.body.innerHTML;
  if(gecko_ok==1) var htmlCode = document.getElementById('edit').contentWindow.document.body.innerHTML;
  document.form_content.content.value = htmlCode;
  
  if(document.form_content.content.value == '')
  {
	alert('Da is nix drinnen ... das nicht gut!');
	return false;
  }
}
//image
//onmouseover="tbmouseover(this.name);" onmouseout="tbmouseout(this.name);"
//-->
</script>
</head>
<form onSubmit="return processData()" name="form_content" action="<?php echo "$form_act"; ?>" method="post">

<body onload="Start()">
<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td>
<div class="imagebutton" id="FontSize">
 <select name="sizechange">
		 <option>1</option>
		 <option>2</option>
		 <option>3</option>
		 <option>4</option>
		 <option>5</option>
		 <option>6</option>
		 <option>9</option>
		</select>
   </div>  
<div class="imagebutton" id="FontName">
 <select name="fontchange">
		 <option>Arial, Helvetica, sans-serif</option>
		 <option>Times New Roman, Times, serif</option>
		</select>
   </div>  
   </td>
 </tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
 <tr>
  <td width="20">
   <div  class="imagebutton" id="bold">
 <a href="#"><img src="mycms/editor/images/icons/bold.gif" name="bold" title="Bold" alt="Bold" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="5"></td>
  <td width="20">
   <div class="imagebutton" id="italic">
 <a href="#"><img src="mycms/editor/images/icons/italic.gif" name="italic" title="Italic" alt="Italic" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="5"></td>
  <td width="20">
   <div class="imagebutton" id="underline">
 <a href="#"><img src="mycms/editor/images/icons/underline.gif" name="underline" title="Underline" alt="Underline" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="20"></td>
  <td width="20">
   <div class="imagebutton" id="justifyleft">
 <a href="#"><img src="mycms/editor/images/icons/left.gif" name="left" title="Left" alt="Left" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="5"></td>
  <td width="20">
   <div class="imagebutton" id="justifycenter">
 <a href="#"><img src="mycms/editor/images/icons/center.gif" name="center" title="Center" alt="Center" class="image"></a>	
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="5"></td>
  <td width="20">
   <div class="imagebutton" id="justifyright">
 <a href="#"><img src="mycms/editor/images/icons/right.gif" name="right" title="Right" alt="Right" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="20"></td>
  <td width="20">
   <div class="imagebutton" id="insertorderedlist">
 <a href="#"><img src="mycms/editor/images/icons/orderedlist.gif"  name="ol" title="Ordered List" alt="Ordered List" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="5"></td>
  <td width="20">
   <div class="imagebutton" id="insertunorderedlist">
 <a href="#"><img src="mycms/editor/images/icons/unorderedlist.gif" name="ul" title="Unordered List" alt="Unordered List" class="image"></a>
   </div>
  </td>
  <td width="5"><img src="mycms/editor/images/pixeltrans.gif" width="20"></td>  
  <td width="20">
   <div class="imagebutton" id="createlink">
 <a href="#"><img src="mycms/editor/images/icons/hyperlink.gif" name="web" title="Hyperlink" alt="Hyperlink"></a>
   </div>
  </td>
 </tr>
 </table>
<iframe id="edit" src="mycms/editor/pre_edit.php" width="400" height="200" frameborder="0" marginheight="0" marginwidth="0">
</iframe>
<textarea name="content" style="visibility:hidden;"></textarea>
<div style="width: 400px;" align="right"><input type="submit" value="Speichern"></div>
</form>
<script language="javascript">
if(ie_ok==1) edit.document.designMode = 'On';
InitToolbarButtons();
// testausgabe
</script>
</body>
</html>

gruß
kalicki

T3ch · 31. Juli 2005

Hi; dein Ansatz ist ja prinzipiell richtig aber die Schrittypen müssen so angegeben werden:

HTML:

 <select name="fontchange">
		 <option>Arial</option>
		 <option>Times New Roman</option>
		 <option>Comic Sans MS</option>
		</select>

Bei den Farben musst du die HEX-Codes (#123456) für die Zuweisung benutzen.

Greetz

kalicki2k · 31. Juli 2005

hallo also ich hab das mal geändert und es geht immer noch nicht. die schrieft größe kann ich auch net verändern wenn es makiert ist usw...

hier kannst du mal schauen:
www.graphicsolution.de/myCMS/editor.php

danke kallicki

kalicki2k · 1. August 2005

hat einer eine idee wo men fehler liegen kann?

gruß
kalicki

hilfe beim javascript code

kalicki2k

Mitglied

T3ch

Erfahrenes Mitglied

kalicki2k

Mitglied

T3ch

Erfahrenes Mitglied

kalicki2k

Mitglied

T3ch

Erfahrenes Mitglied

kalicki2k

Mitglied

T3ch

Erfahrenes Mitglied

kalicki2k

Mitglied

kalicki2k

Mitglied

Neue Beiträge