Moja pasja programowanie...

WYSIWYG (ang. What You See Is What You Get co znaczy dosłownie To Co Widzisz Jest Tym Co Otrzymasz) to akronim stosowany w informatyce dla określenia metod, które pozwalają uzyskać wynik w publikacji identyczny lub bardzo zbliżony do obrazu na ekranie. [Źródło: pl.wikipedia.org]

W skrócie mówiąc jest to tym, co mamy w edytorach tekstu (np. Word). Aby określić wygląd dokumentu umieszczonego w formularzu na stronie internetowej trzeba stosować html, lub znaczniki BBCode. Nie każdy jednak zna html i nie każda strona obsługuje znaczniki BBCode. Od niedawna dostępne są komponenty na stronę internetową, które pozwalają z bardzo prosty sposób umieścić edytor WYSIWYG w oknie przeglądarki. Mnie zainteresował projekt TinyMCE. Jest on bardzo prosty w instalacji i wymaga niewielkiej ingerencji w kod źródłowy strony. Nawet początkującemu webmasterowi dodatnie takiego edytora nie powinno zająć dłużej niż 3-4 minuty. Aby umieścić TinyMCE na stronie należy pobrać pliki oraz pakiet językowy. Folder z plikamy umieszczamy na serwerze. W kodzie strony, na której chcemy umieścić edytor należy w sekcji head dodać kod:

<script language="javascript" type="text/javascript" src="sciezka_do_pliku/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    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" 
    }
});
</script>

I gotowe. Od tej pory w każdym polu textarea będzie widoczny edytor. Można zmieniać jego ustawienia zgodnie z instrukcjami zamieszczonymi na stronie producenta. Kod który podałem wyświetla jedynie najważniejsze funkcje, aby rozmiary panelu edytora były jak najmniejsze.

Edit: Na własnym przykładzie przekonałem się, że domyślne kodowanie znaków zawiera błąd w wyświetlaniu litery "ó", która pokazywana jest jako ó Sposobem na to okazało się dodanie

entity_encoding : "raw" 

do kodu wywołującego. Treść artykułu jest już poprawiona.

5 komentarzy