Loading:

Ostatnio dodane

php Upload dodaw PHP Tworzenia mi Logowanie obiekt Prosty system sz Lista plików z Jak zbudować pr Jak zamienić w IP uzytkownika Obiekt Timer [AS Proste skrypty w

Top 10

1.imagefill 2.asin() 3.strrev() 4.getmygid() 5.session_id 6.arsort() 7.fam_open 8.clip 9.sinh 10.gztell()

56853.05

Jak zrobić z pola textarea edytor na wzór Worda, czyli jak zrobić edytor WYSIWYG

Skrypt pokaże jak zrobić rozbudowany edytor tekstu z pola textarea.

Na początek musimy pobrać pliki biblioteki TinyMC bo to właśnie z jej pomocą stworzymy nasz edytor.

[ Pobierz TinyMC ]

Rozpakowujemy pobrany plik, katalog tinymce wgrywamy w całości na serwer do głównego katalogu strony.

Następnie tworzymy Plik tinymcm.js (LISTING 1.0) i wgrywamy do głównego katalogu strony.

Potem wystarczy zaciągnąc 2 pliki w nagłówku i textarea nadać id="elm1" i name="elm1"

LISTING 1.1 Ukazuje zastosowanie.

Uwaga w paczce z TinyMC są gotowe przykłady różnych wersji, ja podałem tu tylko jeden przykład.

Listing

//Listing 1.0
//Kod pliku tinymcm.js

tinyMCE.init({
theme : "advanced",
mode: "exact",
elements : "elm1",
language : "pl",
entity_encoding : "raw",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left",
theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,bullist,
numlist,indent,separator,undo,redo,
separator,link,unlink,anchor,image,separator,code",
theme_advanced_buttons2 : "",
theme_advanced_buttons3 : "",
auto_cleanup_word : true,
plugins : "table,save,advhr,advimage,advlink,emotions,iespell,
insertdatetime,preview,zoom,flash,searchreplace,
print,contextmenu,fullscreen",
plugin_insertdate_dateFormat : "%m/%d/%Y",
plugin_insertdate_timeFormat : "%H:%M:%S",
extended_valid_elements : "a[name|href|target=_blank|title|onclick], img[class|src|border=0|alt|title|hspace|vspace|width|height|
align|onmouseover|onmouseout|name],
hr[class|width|size|noshade],
font[face|size|color|style],span[class|align|style]",
fullscreen_settings : {
theme_advanced_path_location : "top",
theme_advanced_buttons1 : "fullscreen,separator,preview,separator,cut,
copy,paste,separator,undo,redo,separator,search,
replace,separator,code,separator,cleanup,separator, bold,italic,underline,strikethrough,separator,forecolor,
backcolor,separator,justifyleft,justifycenter,
justifyright,justifyfull,separator,help",
theme_advanced_buttons2 : "removeformat,styleselect,formatselect,fontselect,
fontsizeselect,separator,bullist,numlist,outdent,indent,separator,
link,unlink,anchor",
theme_advanced_buttons3 : "sub,sup,separator,image,insertdate,inserttime,separator,
tablecontrols,separator,hr,advhr,visualaid,separator,
charmap,emotions,iespell,flash,separator,print"
}
});

//LISTING 1.1
//Kod pliku edytor.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tytuł</title>
<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript" src="tinymcm.js"></script>
</head>
<body>
<textarea name="elm1" rows="15" cols="80"></textarea>
</body>
</html>