TinyMCE – podgląd na żywo

Przy wprowadzaniu tekstu w panelu administracyjnym czasami potrzebne jest dokładniejsze rozeznanie jak będzie on wyglądać w części przeznaczonej dla odwiedzających (szczególnie, gdy obszar dla tekstu jest ograniczony). TinyMCE posiada podgląd, ale nie jest on zbyt użyteczny. Z dostępnych metod onchange_callback reaguje jedynie na kliknięcia myszki (to się przyda, o ile tekst będzie formatowany), natomiast handle_event_callback poprawnie działa przy jednym polu edycyjnym (przy edycji w drugim edytorze pokazuje się komunikat, że obiekt wywołujący zdarzenie jest niezdefiniowany).

Jest jeszcze jedna metoda, która sprawdzi się najlepiej – setup. Używamy jej przy inicjalizacji tinymce:

<script type="text/javascript">
tinyMCE.init({
// ... //
setup : function(ed) {
      ed.onKeyUp.add(function(ed, e) {
			 if(ed.getElement().getAttribute( 'id' ) == ID_POLA ) {
			   $("#ID_PODGLADU").html(ed.getContent()) ;
			 }
			 else {
			   $("#ID_PODGLADU2").html(ed.getContent()) ;
			 }
      });
   },
// ... //
});
</script>

Do tego formularz z polami tekstowymi:

<textarea id="ID_POLA" name="tekst1"></textarea><br />
<div id="ID_PODGLADU"></div>
<textarea id="ID_POLA2" name="tekst2"></textarea><br />
<div id="ID_PODGLADU2"></div>

oraz powiązanie tinymce z powyższymi polami:

<script type="text/javascript">
if( document.getElementById( 'ID_POLA' ))
  tinyMCE.execCommand('mceAddControl', false, 'ID_POLA');
  if( document.getElementById( 'ID_POLA2' ))
  tinyMCE.execCommand('mceAddControl', false, 'ID_POLA2');
</script>

Po odpowiednim przygotowaniu styli dla pól podglądu uzyskamy oczekiwany rezultat: po każdym naciśnięciu klawisza zawartość odpowiedniego pola ulegnie zmianie. Treść z edytora (ed.getContent()) zostanie wstawiona do pola, które powiązane jest z danym edytorem (ed.getElement().getAttribute( 'id’ )). Jako atrybut można zastosować także 'name’ zamiast 'id’.

• Tweet
• Pin It