JavaScript » Artykuły

Własny edytor tekstu

  • 2009-06-23 11:37
  • 3 komentarze
  • 1184 odsłony
  • Oceń ten tekst jako pierwszy

Wstęp


Na wielu stronach pojawiają się ładne edytory WYSIWIG, które ułatwiają pracę z redagowaniem tekstu. Postaram się przedstawić  tobie sposób w jaki można wykonać prosty edytor. Co prawda nie będzie on przypominał rozbudowanych edytorów WYSIWIG, ale powinien wystarczyć do tego by sprawić sobie dobrą  zabawę. Choć z samego początku nie opiszę wszystkiego co bym chciał, to postaram się uzupełniać ten artykuł i edytor o coraz nowsze możliwości.

Założenia i funkcjonalności edytora


Formularz narzędziowy

To będzie coś w rodzaju zestawu narzędzi które pozwolą na "obróbkę" tekstu w postaci HTML. Wykorzystamy do tego "zwykłe" HTML-owe formularze.

Podgląd

Edytory WYSIWIG umożliwiają podgląd na żywo gotowego tekstu. Nasz edytorek nie będzie miał takiej opcji, ale zastąpimy go inną. Edycja tekstu odbywać się będzie w polu textarea, za pomocą JavaScript, pobierzemy tekst, sformatujemy go a następnie umieścimy w divie.

Mechanizm bbcodes

Dzięki wyrażeniom regularnym w JavaScript, stworzymy własny mechanizm bbcodes. Dodatkowo pokolorujemy kod źródłowy.

Zaczynamy


Na początek stwórzmy dokument HTML w którym to będziemy testować nasz edytor.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title>MyEditor</title>
</head>
<body>
 
<script type="text/javascript">
<!--  miejsce na kod edytora -->
</script>
 
<textarea id="text" cols="50" rows="20">
</textarea>
 
<br><br>
 
<input type="submit" value="Podgląd" onclick=<!-- przechwytujemy zdarzenie --> />
 
<fieldset align="left">
        <legend>
                <b>Podgląd</b>
        </legend>
 
        <div id="viewContent">
        </div>
</fieldset>
 
</body>
</html>


Prosty szablon na umieszczenie naszego edytora. Pole tekstowe (id = text) służyć będzie nam do edytowania tekstu. Stąd pobierzemy tekst do dalszych działań. Przycisk (podgląd) przechwytuje zdarzenie - jeśli naciśniemy go zostaną wykonane pewne działania. Wykorzystamy to do tego aby przekazać  tekst do podglądu. W warstwie (id = viewContent) umieścimy właściwy, sformatowany tekst - co pozwoli na podgląd obecnego postępu prac nad tekstem.

Skrypt


Przejdźmy teraz do właściwej pracy - napisania skryptu. Na tym etapie nie będzie on rozbudowany. Stanowić będzie dla nas podstawę do dalszego rozwoju skryptu.

Zasada działania

Zasada jest prosta - pobrać tekst i podejrzeć jego właściwą formę. Stwórzmy sobie prostą funkcję która odbierze a następnie przekaże tekst do wyświetlenia.

function view( textId , viewId )
{
        document.getElementById( viewId ).innerHTML = document.getElementById( textId ).value;
}


Zmienną textId przekazujemy do skryptu id pola tekstowego, a zmienną viewId id warstwy do której przekażemy gotowy tekst. Oczywiste jest że musimy pobrać tekst:

document.getElementById( textId ).value


Tak o to z pola tekstowego dostaliśmy wartość  którą w sobie trzymał (tekst wpisany w pole).

getElementById zwraca nam uchwyt obiektu według podanego id, dzięki czemu możemy się dostać do właściwości oraz metod tegoż obiektu (my dostaliśmy się do wartości pola tekstowego).

Podobnie dostaliśmy się do warstwy w której umieścimy gotowy tekst. Zagadkowa może być właściwość innerHTML. Dzięki niej możemy dostać kod HTML który znajduje się w danym obiekcie. Nas bardziej interesuje możliwość przypisania kodu, który zostanie wyświetlony w przeglądarce. Dzięki tej właściwości możemy po prostu przypisać kod HTML do obiektu (niejako go wkleić).

Tak więc funkcja view dostaje dwa parametry:

  1. ID pola tekstowego
  2. ID warstwy (div)

Następnie warstwie przekazuje tekst z pola tekstowego.

Wykorzystanie funkcji view

Przyszedł czas na skorzystanie z dobrodziejstw naszej funkcji view, którą wykorzystamy do stworzenia podglądu. W szablonie HTML stworzyliśmy przycisk:

<input type="submit" value="Podgląd" onclick=<!-- przechwytujemy zdarzenie --> />


w którym teraz zastosujemy funkcję view. Dokładniej to zdarzenie onclick wywoła funkcję view przekazując jej dwa parametry (id pola tekstowego i id warstwy). Funkcja zrobi swoje a my będziemy cieszyć się z efektu. U nas id pola tekstowego = text id a warstwy = viewContent. Uzupełnijmy teraz nasz przycisk:

<input type="submit" value="Podgląd" onclick="view( 'text' , 'viewContent' );" />


Zobaczmy efekt. Wpiszmy np:

<b>pogrubione</b> <br> <i>italic</i> ... (i inne znaczniki html)

Na dole powinien pojawić się ładny, sformatowany tekst. (skrypt testowany pod FF,  w innych przeglądarkach mogą występować problemy - choć nie muszą).

Podsumowanie


Skrypt jak widać prosty, zajął zaledwie linijkę (no może dwie, trzy albo cztery). Możliwe że teraz cieszysz się z efektów. Ale  to nie wszystko, dalej postaram się napisać trochę więcej i tym samym rozbudować możliwości skryptu (w niedalekiej przyszłości tekst zostanie dokończony ;) - Mam taką nadzieję).

3 komentarze

manfredek 2009-06-22 16:08

To go zmień, proste. I popraw to, arty nie służą do pokazywania, czego NIE robić.

michalos13 2009-06-21 20:27

Nie ja go wybrałem. Trzeba zmienić edytor html-a....

manfredek 2009-06-21 18:04

Aleś sobie DTD i charset wybrał... Strict i UTF-8 nie istnieją?