Edytor BBCode w JavaScript

Autor: Andrew Kitchin
Data publikacji: 19.08.2005, 09:36 | Ostatnia modyfikacja: 19.11.2006, 17:46

Pierwsza część serii opisującej tworzenie kompletnego mechanizmu BBCode. W tym odcinku poruszane jest pisanie formularza HTML z edytorem BBCode z JavaScript.

Spis treści

Z pewnością wielu ludzi zastanawiało się, jak należy wykonać edytor BBCode umożliwiający użytkownikom wstawianie do swych tekstów na stronie specjalnych znaczników. Jak każdy dobry programista wie, nie można po prostu zezwolić człowiekowi na użycie HTML'a, gdyż zagrażałoby to poważnie bezpieczeństwu serwisu. Tak więc musimy stworzyć zestaw znaczników wstawianych za pośrednictwem przycisku, które będą konwertowane na HTML dopiero po wciśnięciu przycisku "Podgląd", bądź "Wyślij".

Ten artykuł przedstawi tylko tę część przedsięwzięcia, która wykonywana jest po stronie klienta - formularz do edycji z przyciskami korzystającymi z JavaScriptu, by umieścić w polu tekstowym odpowiednie znaczniki. Część uruchamiana po stronie serwera, czyli zestaw wyrażeń regularnych, mechanizm podglądu, oraz zapisu zostaną przedstawione w następnej części artykułu.

Przedstawiony tutaj kod nie będzie posiadać wielu cech systemu z phpBB. Najbardziej zauważalne różnice to brak zamykania otwartych tagów, oraz blokady przeciwko nieprawidłowemu zagnieżdżaniu znaczników. Stworzyłem go dla potrzeb edytora danych na stronę WWW - pierwotnie stosowałem go do tworzenia nowych newsów, ale można go używać w wielu innych kontekstach.

Ta część artykułu wymaga właściwie tylko przeglądarki obsługującej JavaScript. Jednak abyś mógł skorzystać z zawartych dalej porad, będziesz potrzebować serwera WWW obsługującego PHP. Dodatkowo, jeżeli chciałbyś zapisywać gdzieś stworzone wiadomości, będziesz musiał mieć także serwer baz danych MySQL. To wszystko, co miałem do powiedzenia na początku, więc zabierzmy się do roboty!

Formularz

Aby zacząć nasze prace, będziemy potrzebowali formularza HTML, którego użytkownik będzie mógł użyć do napisania wiadomości. Jak już wcześniej wspomniałem, edytor ten był pierwotnie zaprojektowany do dodawania newsów, tak więc zaprezentuję tu klasyczną formę tytuł-autor-treść. Oto odpowiedni kod, wyjaśnienie znajduje się poniżej:

<html><head>
<title>Edytor</title>
<script src="editor.js"></script>
</head><body>
<form action="jakas_akcja" method="dowolna" name="editform"><p><input type="button" value="bold" name="bold" onclick="javascript:tag('b', '', 'bold*', '', 'bold', 'bold');" /></p>
<p>Tytuł: <input type="text" name="title" size="50" /><br />
Autor: <input type="text" name="author" size="35" /><br />
Wiadomość:<br />
<textarea rows="5" cols="75" name="post"></textarea></p>
<input type="submit" name="preview" value="Podgląd" />
<input type="submit" name="submit" value="Dodaj" /></form>
</body></html>

Jak widzicie, formularz jest bardzo prosty. Ponadto możecie dostrzec, że w jego definicji nie wpisałem żadnych konkretnych danych. Zrobiłem tak, gdyż część przetwarzającą dane zostawimy sobie do drugiej części artykułu. Przyjrzyjmy się pierwszej części kodu:

<html><head>
<title>Editor</title>
<script src="editor.js"></script>
</head><body>
<form action="something" method="whatever" name="editform"><p>

Jest to standardowy nagłówek. Jedyną różnicą między nim, a innymi takimi nagłówkami jest dołączanie zewnętrznego pliku JavaScript. Wrócimy do niego dalej, na razie trzeba nam wiedzieć, że jest on niezbędny. Wreszcie otwieramy znacznik formularza, po czym tworzymy paragraf. Dla potrzeb JS, nadaliśmy formularzowi nazwę "editform".

<input type="button" value="bold" name="bold" onclick="javascript:tag('b', '', 'bold*', '', 'bold', 'bold');" /></p>
<p>Tytuł: <input type="text" name="title" size="50" /><br />
Autor: <input type="text" name="author" size="35" /><br />
Wiadomość:<br />
<textarea rows="5" cols="75" name="post"></textarea></p>

Oto serce formularza. Pierwszy przycisk znacznika jest na razie także ostatnim takim przyciskiem. Możesz dostrzec, że odwołuje się on do funkcji JS zwanej tag(), wprowadzając do niej kilka parametrów. Wrócimy do nich później. Wreszcie, dodajemy pola tekstowe dla tytułu, autora i treści. Jedyną rzeczą, na którą pragnę zwrócić uwagę, jest nadanie nazw polu tekstowemu i przyciskom znaczników.

<input type="submit" name="preview" value="Podgląd" />
<input type="submit" name="submit" value="Dodaj" /></form>
</body></html>

Na końcu dodajemy przyciski pozwalające nam wykonać podgląd wiadomości, lub zapisanie jej. Na tym kończymy omawianie kodu HTML, przejdziemy więc do JavaScript'u.

Do góry

JavaScript

Tak, wiem, niezbyt oryginalny tytuł. Jednakże, oto potrzebny kod JavaScript:

var b = 2;
function tag(v, tagadd, newbut, tagclose, oldbut, name) {
   if(eval(v)%2 == 0){
      eval("window.document.editform."+name+".value = newbut;");
      var post = window.document.editform.post.value;
      window.document.editform.post.value = post + tagadd;
      window.document.editform.post.focus();
   }else{
      eval("window.document.editform."+name+".value = oldbut;");
      var post = window.document.editform.post.value;
      window.document.editform.post.value = post + tagclose;
      window.document.editform.post.focus();
   }
   eval(v+"++;");
}

Ponownie mamy do czynienia z prostym skryptem. Dla tych, którzy nie rozumieją niektórych części kodu, rozbiję go na części i opiszę.

var b = 2;
function tag(v, tagadd, newbut, tagclose, oldbut, name) {
   if (eval(v)%2 == 0) {

Na samym początku nadajemy zmiennej b wartość 2. Jest to ważna część, gdyż każdy przycisk będzie naprzemiennie pełnił różne funkcje. Brzmi znajomo? Przypomina to przeplatanie kolorów wierszy przy pobieraniu danych z bazy danych. Będziemy zwiększali tę wartość za każdym razem, gdy wstawimy nowy tag, a po następnym kliknięciu w przycisk zostanie on zamknięty (obliczymy to dzieleniem modulo, tj. resztą z dzielenia). Każdy przycisk musi mieć oddzielną zmienną tego typu.

Definiujemy także listę parametrów w nawiasach. v jest nazwą zmiennej użytej do sprawdzenia, czy tag jest otwarty, czy nie (w przypadku naszego formularza przekazujemy tutaj tylko wartość "b"). tagadd określa otwartą formę znacznika, jaki chcemy dodać. newbut to opis widniejący na przycisku po kliknięciu na niego (np. "bold*"). tagclose przekazuje formę znacznika dodawaną, gdy tag jest zamykany. oldbut opisuje oryginalną nazwę przycisku (gdy nie jest kliknięty), a name to po prostu nazwa przycisku, którego używamy.

Wróćmy do właściwego kodu - sprawdzamy wynik dzielenia modulo w instrukcji if(). Jeżeli reszta z dzielenia wynosi 0, oznacza to, iż tag jest zamknięty i w tym kliknięciu przycisku zostanie on otwarty. Wykona się więc ten kod:

      eval("window.document.editform."+name+".value = newbut;");
      var post = window.document.editform.post.value;
      window.document.editform.post.value = post + tagadd;
      window.document.editform.post.focus();

Najpierw sprawiamy, że przycisk przyjmie nazwę określoną w newbut (np. "bold*"). W kolejnej linii nadajemy zmiennej post aktualną zawartość pola textarea. Trzecia linia - dodajemy znacznik otwierający. Na końcu przesuwamy kursor na koniec tekstu tak, by użytkownik od razu mógł pisać odpowiednio sformatowany tekst bez konieczności ręcznego bawienia się strzałkami.

   }else{
      eval("window.document.editform."+name+".value = oldbut;");
      var post = window.document.editform.post.value;
      window.document.editform.post.value = post + tagclose;
      window.document.editform.post.focus();
   }

Ten kod wykonuje się, gdy reszta z dzielenia nie jest równa zeru (czyli tag został kiedyś otwarty i trzeba go zamknąć). Wykonujemy tutaj te same czynności, co w poprzednim fragmencie, tyle że dane czerpiemy z innych parametrów.

   eval(v+"++;");
}

Tutaj bez względu na to, czy otwieramy, czy zamykamy nasz znacznik, musimy zwiększyć wartość w zmiennej określającej stan przycisku. W przeciwnym wypadku dostawalibyśmy w kółko same znaczniki otwierające, bądź zamykające.

Do góry

Koniec części pierwszej

Tak więc nauczyliśmy się trochę o działaniu mechanizmów BBcode zakodowanych w HTML'u i JavaScripcie. Większość z nich jest póki co niezbyt rozbudowana. Możesz jednak, ku własnej satysfakcji i doświadczeniu, zmodyfikować zawarty tu kod. Dodaj przyciski, dodaj możliwości, wprowadź elementy designu. W tej chwili pracuję nad drugą częścią tego tekstu, odczuwalnie dłuższą.

Jeszcze raz usilnie namawiam do eksperymentowania z tym kodem. Mam nadzieję, że będzie do pomocne w przyswojeniu tego, co tu opisałem.

Andrew Kitchin (http://www.calgarytritons.com/~fluid/)

Przetłumaczył Zyx (http://www.zyxist.com/)

Do góry