[JavaScript]Mały edytor WYSIWYG

0

Witam.
Mam problem, ponieważ nie wiem jak zrobić taki mały edytor. Chodzi mi o to, że gdy kliknę w literkę [b]b[/b] to automatycznie pokaże mi się kod [b.][./b](bez kropek) w polu tekstowym. Wiem jedynie, że muszę skorzystać z JavaScript, a konkretniej z getElementById.
Tylko nie wiem co z tym dalej zrobić.
Mógłbym prosić o pomoc?
Z góry dziękuje :)

0

@nansss:
Oj, chyba ciut za wcześnie na pisanie własnego edytora. Skoro faktycznie jedyne co wiesz, to to, że trzeba użyć getElementById (nawiasem mówiąc wcale tak nie jest i użycie akurat tej funkcji jest zupełnie nieistotne), to w tym momencie prawdopodobnie mógłbyś jedynie co najwyżej wziąć czyjś kod i leciutko go zmodyfikować, nie rozumiejąc nawet w pełni jego działania.

Mogę Ci jedynie doradzić naukę JavaScriptu i używanych w nim interfejsów, w tym DOM. Rozumiem, że chcesz, by w edytorze była możliwość zaznaczenia tekstu i kliknięcia w przycisk np. B, co powodowałoby otoczenia zaznaczonego tekstu przez [b] i [/b]. Generalnie z Twoją obecną wiedzą od podstaw tego nie napiszesz -- gdybyś był programistycznie gotowy, to nie zadawałbyś tego typu pytań (i nie pytał o nieistotną tutaj funkcję getElementById).

Możesz w tym momencie poszukać gotowych edytorów lub gotowego kodu. Potrzebujesz tak naprawdę zrobić coś takiego:
-Przypisać do przycisków (B i pewnie jeszcze U oraz I) funkcje obsługi zdarzenia click
-Funkcje te powinny:
--Sprawdzić zaznaczenie pola tekstowego: numer znaku, od którego rozpoczyna się zaznaczony tekst oraz liczbę zaznaczonych znaków
---Do pola tekstowego można się dostać za pomocą getElementById, ale to zupełnie nieistotne i nie jest niezbędne, można użyć innych metod DOM
---W przeglądarkach niestety jest problem z wyczajeniem zaznaczenia, bo w różnych jest różnie (możesz poszukać odpowiednich sposobów na stronach takich jak <url>quirksmode.org</url>)
--Zapamiętać to zaznaczenie
--Zamienić tekst w polu tekstowym tak, by przed zaznaczeniem wstawione było np. [b], a za nim [/b] (dla pogrubienia, analogicznie dla I oraz U)
--Ewentualnie przywrócić poprzednie zaznaczenie (poprzednia operacja resetuje zaznaczenie)

Możesz na takie coś poszukać gotowych skryptów i prawdopodobnie w tym momencie będzie to najlepszym rozwiązaniem. Możesz się na nich uczyć, ale takie uczenie na dość skomplikowanym, konkretnym przypadku nie zastąpi zrozumienia DOM i samego JavaScriptu.

0
<script type="javascript">
      function putTag(field, strBefore, strAfter) {
      element = document.getElementById(field);
      element.focus();
      // IE
      if (document.selection) {
      var oRange = document.selection.createRange();
      var numLen = oRange.text.length;
      oRange.text = strBefore + oRange.text + strAfter;
      return false;
      // FF i Opera
      } else if (element.setSelectionRange) {
      var selStart = element.selectionStart, selEnd = element.selectionEnd;
      var oldScrollTop = element.scrollTop;
      oRange = element.value.substring(selStart, selEnd);
      element.value = element.value.substring(0, selStart) + strBefore + oRange + strAfter + element.value.substring(selEnd);
      element.setSelectionRange(selStart + strBefore.length, selEnd + strBefore.length);
      element.scrollTop = oldScrollTop;
      element.focus();
      } else {
      var oldScrollTop = element.scrollTop;
      element.value += strBefore + strAfter;
      element.scrollTop = oldScrollTop;
      element.focus();
      }
      }
</script>
<input type="button" value="Podkreślenie" onclick="putTag('textarea', '[.u]', '[/.u]')" />
0

ten kod cos nie działa, przycisk sie wyswietla, ale po zaznaczeniu tekstu i nacisnieciu na podkreslenie nic sie nie podkresla, czy ktos moglby pomoc?

0

przeciez ty nie ogarniasz co w tym kodzie sie dzieje
masz jakies pole tekstowe o id jakiego szuka funkcja putTag? pewnie nie
poza tym tu samo sie nic nie podkresli, bo funkcja, ktora podal ci Sueroski wstawi przed i po zaznaczonym tekscie jakies ciagi znakow, a skad przegladarka ma wiedziec ze jak trafi na [.u] to ma zaczac podkreslenie?

1 użytkowników online, w tym zalogowanych: 0, gości: 1