Loading:


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.



Napisz Artyku³

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>




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 28716
Komentarze użytkowników
Jeśli komuś nie działa plik js to gotowe przykłady są w paczce w katalogu example
autor: Igor | 262 | 2009-06-08 23:02:40


    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2020 v.1.5 | design: diviXdesign & rainbowcolors