RkBlog

Hardware, programming and astronomy tutorials and reviews.

eArea

Opis prostego edytora WYSIWYG eArea. Za jego pomocą można zamienić tagi Textarea prostym i poręcznym edytorem HTML

eArea to bardzo prosty edytor WYSIWYG napisany w JavaScript autorstwa Olivera Morana, rozprowadzany na licencji LGPL. Skrypt można pobrać z tej strony. Działa pod IE i Mozillami, autor twierdzi iż działa również pod Konquerorem i Safari lecz mi pod tą pierwszą przeglądarką edytor nie działa. By dodać edytor do formularza wystarczy:
<script language="javascript" type="text/javascript" src="eArea/editableArea.js"></script>
<script language="javascript">
	insertEditableArea(
		"myEditArea", 	// nazwa edytora
		300, 			// długość
		200, 			// wysokość okna
		"[bold][italic][underlined][align-left][justify][align-center][align-right]<br />[edit-area]",
		"font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:Black;"
	);
</script>

<br />
<form method="post" action="plik.php" name="test">
<input type="hidden" value="" name="dane">
<input type="submit" value="Wyślij" onclick="javascript:document.forms.test.dane.value=editableAreaContents('myEditArea');" />
</form>

<?PHP
print_r($_POST);
?>
Na początku załączamy plik JS edytora a następnie wywołujemy go. Nazwa edytora potrzebna jest do jego identyfikacji i pobrania zawartych w nim danych. W rzeczywistym formularzu musimy umieścić ukryte pola, do których skopiujemy zawartość edytora przy wysyłaniu. Za kopiowanie odpowiedzialny jest kod
onclick="javascript:document.forms.test.dane.value=editableAreaContents('myEditArea');"
z przycisku submit, gdzie format takiego kopiowania to:
javascript:document.forms.NAZWA_FORMULARZA.NAZWA_POLA_UKRYTEGO.value=editableAreaContents('NAZWA_EDYTORA');
RkBlog

11 July 2008;

Comment article