Własny edytor tekstu
michalos13
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">
</script>
<textarea id="text" cols="50" rows="20">
</textarea>
<input type="submit" value="Podgląd" onclick= />
<fieldset align="left">
<legend>
Podgląd
</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:
ID pola tekstowego</li>
ID warstwy (div)</li>
</ol>
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= />
w którym teraz zastosujemy funkcję <b>view</b>. Dokładniej to zdarzenie <b>onclick</b> wywoła funkcję <b>view</b> 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 = <b>text</b> id a warstwy = <b>viewContent</b>. Uzupełnijmy teraz nasz przycisk:
<code class="html4strict"><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
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ę).
To go zmień, proste. I popraw to, arty nie służą do pokazywania, czego NIE robić.
Nie ja go wybrałem. Trzeba zmienić edytor html-a....
Aleś sobie DTD i charset wybrał... Strict i UTF-8 nie istnieją?