mój mały edytor html'a

**ironwall** · 12-29-2007

Napisało mi sie taki edytorek html'a jako odpowiedź do poprzedniego tematu no i przy okazji odświeżyłem szare js komórki
bardzo łatwo jest "dorobić" do niego nowe funkcje czyli możliwość dodawania nowych tagów, ale już mi się nie chciało, tylko te najważniejsze są.Może komuś się przyda

Kod:

<html>
<head>
<!-- coded by iron0088 -->
<meta http-equiv="Content-Type" content="text/html;charset=windows-1250"/>
</head>
<body>





<font color=red size=7><center>PROSTY EDYTOR HTML'a</center></font></br>
<script type="text/javascript">

zmienna=0;
function kolorki()
{
	kolory=new Array();
	kolory[0]="red";
	kolory[1]="white";
	kolory[2]="green";
	kolory[3]="yellow";
	kolory[4]="silver";
	kolory[5]="blue";
	kolory[6]="orange";
	document.getElementById('podpis').style.color=kolory[zmienna];
	zmienna++;
	if(zmienna==6)
	{
		zmienna=0;
	}
}
function zmienkolor()
{
	setInterval("kolorki();",1000);
}





function koduj(cecha)
{
	calosc=document.getElementById('a').value;
	zmienna1=document.getElementById('a').selectionStart;
	zmienna2=document.getElementById('a').selectionEnd;
	
	
	uchwyt=calosc.substring(zmienna1,zmienna2);
	cecha2="";
	if(cecha=="<b>") cecha2="</b>";
	if(cecha=="<i>") cecha2="</i>";
	if(cecha=="<u>") cecha2="</u>";
	if(cecha=="<p>") cecha2="</p>";
	if(cecha=="windows") cecha="<meta http-equiv='Content-Type content=text/html;charset=windows-1250'/>";
	if(cecha=="iso") cecha="<meta http-equiv='Content-Type content=iso-8859-2'/>";
	obrazek=document.getElementById('obrazek').value;
	kolorek=document.getElementById('kolor').value;
	www=document.getElementById('www').value;
	tlo=document.getElementById('tlo').value;
	komentarz=document.getElementById('komentarz').value;
	if(cecha=="<img src=>") 
	{
		cecha='<img src='+obrazek+'>'; 
		cecha2="</img>";
	}
	
	if(cecha=="<font color=>")
	{
		cecha='<font color='+kolorek+'>';
		cecha2='</font>';
 	}
	if(cecha=="<a href=>")
	{
		cecha='<a href='+www+'>';
		cecha2='</a>';
	}
	if(cecha=="<bg color=>")
	{
		cecha='<bg color='+tlo+'>';
		cecha2='</bg>';
	}
	if(cecha=="<!--")
	{
		cecha='<!--'+komentarz+'>';
		cecha2='-->';
	}	
	kod=cecha+uchwyt+cecha2;
	if(uchwyt=="")
	{
		rezultat=calosc+kod;
	}
	else
	{
		rezultat=calosc.replace(uchwyt,kod);
	}
	document.getElementById('a').value=rezultat;
	
	
	
}


</script>



</br>

<body onload="zmienkolor()">
<div style="float:left;width:65%">

<form action="edytor.php" method="post">
<textarea id="a" cols="88" rows="9" style="border:2px dashed black" name="tekst"></textarea></br>



<input type="button" onClick="koduj('<html><head>')" value="rozpoczecie">
<input type="button" onClick="koduj('windows')" value="kodowanie windows-1250">
<input type="button" onClick="koduj('iso')" value="kodowanie iso-8859-2">
<input type="button" onClick="koduj('</head><body>')" value="zakończ część head">
</br>

<input type="button" value="tlo strony" onClick="koduj('<bg color=>')">
<input type="text" value="kolor tła strony" id="tlo">
<input type="button" value="komentarz" onClick="koduj('<!--')">
<input type="text" value="treść komentarza" id="komentarz">
</br>
<input type="button" onClick="koduj('<b>')" value="pogrub">

<input type="button" onClick="koduj('<i>')" value="ukośny">
<input type="button" onClick="koduj('<u>')" value="podkresl">
<input type="button" onClick="koduj('<hr>')" value="linia">
<input type="button" onClick="koduj('</br>')" value="nowa linia">
<input type="button" onClick="koduj('<p>')" value="akapit">
<input type="button" onClick="koduj('<center>')" value="wyśrodkowanie">
<input type="button" onClick="koduj('</center>')" value="zakończ wyśrodkowanie">

</br>
<input type="button" value="obrazek" onClick="koduj('<img src=>')">
<input type="text" value="adres obrazka" id="obrazek">
<input type="button" value="kolor tekstu" onClick="koduj('<font color=>')">
<input type="text" value="kolor(po angielsku)" id="kolor" >
<input type="button" value="odsyłacz" onClick="koduj('<a href=>')">
<input type="text" value="adres strony" id="www">

</br>
<input type="button" value="zakończ" onClick="koduj('</body></html>')"></br>
<input type="button" style="background:orange" value="czysc" onClick="document.getElementById('a').value=''">
</br></br>

</div>

<div style="background:silver;width:30%;float:right;padding:3mm;border:2px dotted black">
<b>ABOUT</b></br>
Jest to prosty edytor html'a, dzięki któremu można
osadzać w tagi swój tekst.</br> Edytor wykorzystuje javascript przy edytowaniu
</br>kodu oraz php przy zapisywaniu kodu do pliku html.
Aby nadać tekstowi atrybut to zaznacz go kawałek i naciśnij np: pogrub lub kolor.</br>
<img src="3.jpg" style="float:right"></br>

</div>








<div style="clear:both">
</br></br>
</br>
jesli zapisujesz to podaj nazwe pliku<input type="text" name="nazwa">
<input type="submit" value="zapis" name="zapis"></br>
<input type="submit" value="podglad" name="podglad">
</form>

</font>
</br><hr size=6px color=black>




<?php
if(isset($_POST['podglad']))
{
	
	$tekst=$_POST['tekst'];
	echo "$tekst";
}
if(isset($_POST['zapis']))
{
	if(empty($_POST['nazwa']))
	{
		echo "musisz podac nazwe pliku</br>";
	}
	if(empty($_POST['tekst']))
	{
		echo "nic nie napisałes ;] </br>";
	}

	if(!empty($_POST['nazwa']) &&
	!empty($_POST['tekst']))
	{
		
		$nazwa=$_POST['nazwa'];
		$plik=$nazwa.".html";
		if(file_exists($plik))
		{
			echo "niestety taki sam plik już istnieje";
		}
		else
		{
			$tekst=$_POST['tekst'];
			$otworz=fopen($plik,"w+");
			fputs($otworz,"$tekst");
			echo "Link do pliku";
			echo "</br>oto link: <a href=\"$plik\">$plik</a>";
		}
		
	}
	
}
?>
</div>
<div style="margin-top:1cm;clear:both;text-align:center;background:silver;width:100%;padding:1mm">
<span id="podpis">(c)  Coded by Iron0088</span></div>

najlepiej wrzućcie do html'a i wypróbujcie jak ktoś chce

**Nikow** · 12-30-2007

Czy nie zauważyłeś że ten "twój" edytor wymaga PHP? :>

**eMCe** · 12-30-2007

ale da sie korzystać bez

jak na pierwszy to jest ok

od czegoś trzeba zacząć...

ale brakuje mi tu obiektowości

według mnie dużo mądrzej było by całość jako edytor zrobić jednym obiektem, nadać mu metody, właściwości itp - dzięki temu potem możesz dołączać do każdego panelu w prosty sposób...

Temat: mój mały edytor html'a

Narzędzia wątku

Display

mój mały edytor html'a

Podobne wątki

I need Javascript assistance, edytor HTML

Mój komputer-Dobrze zabezpieczony?

Mój pierwszy komputer.

Mój kod nie działa.Why?:(

dlaczego mój wiatrak wyje

Zasady Postowania

Subskrybuj