pasek narzędziowy, gdzie takie coś znaleźć Opcje

[gam3r]

witam,
chciałbym administratorowi strony dać możliwość bardzo łatwej edycji np. treści newsa i chciałbym na swojej stronie zainstalować podobny pasek narzędzi jak jest na forum lub na tej stronie. Chciałbym się dowiedzieć czy są jakieś gotowe klasy (w php) albo jakieś inne projekty, dzięki którym można by stworzyć taki pasek, w którym można by edytować zawartość, która potem będzie łatwo zamieniana na HTML przez bbcode. CHciałem takie coś sam zrobić bo coś tam o JavaScript czytałem (czyt."Javascript dla każdego") ale niestety ze wszystkim bym sobie raczej poradził oprócz tego jak się dowiedzieć jaki fragment w textarea jest zaznaczony żeby np. "otoczyć" go jakimś znacznikiem, albo nie wiem jak dodać np. linka w środku tekstu.
Dlatego proszę, jeżeli znacie coś to napiszcie, albo powiedzcie jak moge te wyżej wymienione problemy rozwiązać.
Będe wdzięczny za pomoc

[mike]

A może skorzystaj z jakiegoś edytora WYSIWYG.

Typu FCKEditor, TinyMCE lub InnovaEditor.

[gam3r]

te wszystkie edytory WYSIWYG to ciekawa alternatywa, ale mi nie potrzeba aż tak zaawansowanych możliwości, może jednak ktoś zna coś napisanego w JavaScript i łatwego do implementacji?

Próbowałem już ściągnąć i analizować kod np. z Invision Power Board, albo z tej strony ale troche za dużo tam tego kodu:/, przynajmniej w IPB to masakra, a to z owned.pl to już łatwiesze, ale nadal nie łapie gdzie tam są fragmenty które wydzielają np. zaznaczony tekst z textarea

możecie ktoś jeszce pomóc?

Ten post edytował gam3r 25.01.2006, 20:54:35

[vieri_pl]

Wejdź na stronę:

strefaphp.net


Tam wejdź w zakładkę bbcode. Tam znajdziesz rozwiązanie.

[gam3r]

no generator bbcode z strefaphp.net to znam go, właśnie stworzyłem sobie tam odpowiednią funkcję, ale chcę to co masz np. tutaj na forum kiedy piszesz posta --> ten pasek u góry!!

[vieri_pl]

No to czemu nie FCKEditor albo TinyMCE

[gam3r]

no chyba się może na tego FCKEditor'a zdecyduję, ale nie zależało mi na aż tak zaawansowanych opcjach edycji, wystarczyło by mi takie coś jak mamy tutaj na forum

[mike]

Przecież w FCKEdytorze możesz w bardzo prosty sposób definiować swoje paski narzędziowe.
Nic nie stoi na przeszkodzie żebyś miał tylko: pogrubienie, podkreślenie i kursywę.

[gam3r]

aaaa no to tego nie wiedziałem , to zainteresuje się tym

Ten post edytował gam3r 28.01.2006, 13:11:29

[vieri_pl]

No to rada, na przyszłośc, najpierw przeczytaj o czym i co Ci poelcamy, a później mó że to nie to

Pozdrawiam

[gam3r]

chwila, mam jeszce jedno pytanko, przeglądam właśnie sobie dokumentację tego FCKEditora, chciałbym się dowiedzieć czy trzeba coś w CSS'ach ustawiać? chyba nie? on od razu w zmiennej np. $_POST['FCKEditor1'] ma wszystkie znaczniki itp. co nie? i nie trzeba ustawiać żadnych styli?

[vieri_pl]

Ja go używam i nic takiego tam nie ma do ustawiania, nieraz wgra się jakies rozszerzenia itp. Przeczytaj polska dokumantację to będziesz wiedział, nie bądź taki leniwy

[occulkot]

hehehe - milo ze komus sie moj kawalek kodu spodobal - tu masz wersje 2.0 - niezaimplementowana jeszcze w silniku owned:

Kod

function bbcode(tag,pole){

    pole_ = document.getElementById(pole);
    seel=document.selection;
    zaznaczony=false;
    if (seel) {
 pole_.focus();
 if(seel.createRange().text!=""){
     zaznaczony=true;
     wartosc=seel.createRange().text;
 }else{
     wartosc=''
 }
    }

    else if (pole_.selectionStart || pole_.selectionStart == 0) {
 var startPos = pole_.selectionStart;
 var endPos = pole_.selectionEnd;
 if(endPos-startPos>0){
     zaznaczony=true;
     wartosc=pole_.value.substring(startPos,endPos);
 }else{
     wartosc=''
 }
    }


    kreator = document.getElementById(pole + '_kreator').checked;


    insert=true;

    switch(tag){
 case 'b':

 if(kreator){
     if(zaznaczony!=true){
   wartosc=prompt('Podaj tekst który ma zostać pogrubiony:','tekst');
   if(wartosc.length==0){
       insert=false;
   }
     }
 }

 wartosc='[b]' + wartosc + '[/b]';

 break;


 case 'u':

 if(kreator){
     if(zaznaczony!=true){
   wartosc=prompt('Podaj tekst który ma zostać podkre¶lony:','tekst');
   if(wartosc.length==0){
       insert=false;
   }
     }
 }

 wartosc='[u]' + wartosc + '[/u]';

 break;


 case 'i':

 if(kreator){
     if(zaznaczony!=true){
   wartosc=prompt('Podaj tekst który ma zostać pochylony:','tekst');
   if(wartosc.length==0){
       insert=false;
   }
     }
 }

 wartosc='[i]' + wartosc + '[/i]';

 break;


 case 'url':

 if(kreator){

     link=prompt('Podaj adres odno¶nika:','http://');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj tekst odno¶nika:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
     }
 }

 wartosc='[url=' + link + ']' + wartosc + '[/url]';
 break;

 case 'mail':

 if(kreator){

     link=prompt('Podaj adres e-mail:','@');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj tekst odno¶nika:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
     }
 }

 wartosc='[mail=' + link + ']' + wartosc + '[/mail]';


 break;

 case 'quote':

 if(kreator){

     link=prompt('Podaj autora cytatu:','autor');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj tekst cytatu:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
     }
 }

 wartosc='[quote=' + link + ']' + wartosc + '[/quote]';


 break;

 case 'ol':

 if(kreator){

     link=prompt('Podaj nazwę listy:','nazwa');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj pierwsz± pozycje listy:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
   wartosc='\n [li]' + wartosc + '[/li]\n';
     }
 }

 wartosc='[ol=' + link + ']' + wartosc + '[/ol]';


 break;

 case 'ul':

 if(kreator){

     link=prompt('Podaj nazwę listy:','nazwa');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj pierwsz± pozycje listy:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
   wartosc='\n [li]' + wartosc + '[/li]\n';
     }
 }

 wartosc='[ul=' + link + ']' + wartosc + '[/ul]';


 break;

 case 'color':

 if(kreator){

     link=prompt('Podaj nazwę koloru (lista dostępna w pomoct):','red');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj tekst który ma zostać zakolorowany:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
     }
 }

 wartosc='[color=' + link + ']' + wartosc + '[/color]';


 break;

 case 'size':

 if(kreator){

     link=prompt('Podaj rozmiar tekstu (liczba od 1 do 10):','4');
     if(link.length==0){
   insert=false;
     }else{


   if(zaznaczony!=true){
       wartosc=prompt('Podaj tekst:','tekst');
       if(wartosc.length==0){
     insert=false;
       }
   }
     }
 }

 wartosc='[size=' + link + ']' + wartosc + '[/size]';


 break;


 case 'img':

 if(kreator){
     obrazek=prompt('Podaj adres obrazka:','http://');
     if(obrazek.length==0){
   insert=false;
     }
 }

 wartosc='[img]' + obrazek + '[/img]' + wartosc;

 break;


 case 'code':

 if(kreator){
     if(zaznaczony!=true){
   wartosc=prompt('Podaj kod który chcesz wstawić:','tekst');
   if(wartosc.length==0){
       insert=false;
   }
     }
 }

 wartosc='[code' + ']' + wartosc + '[/' + 'CODE]';

  break;

  case 'hide':

  if(kreator){

      link=prompt('Podaj tekst widoczny:','tekst');
      if(link.length==0){
    insert=false;
      }else{


    if(zaznaczony!=true){
        wartosc=prompt('Podaj tekst do ukrycia:','tekst');
        if(wartosc.length==0){
      insert=false;
        }
    }
      }
  }

  wartosc='[hide=' + link + ']' + wartosc + '[/hide]';


  break;

  case 'div':

  if(kreator){

      link=prompt('Podaj justowanie elementu (fleft,left,center,right,fright)','center');
      if(link.length==0){
    insert=false;
      }else{


    if(zaznaczony!=true){
        wartosc=prompt('Podaj tekst:','tekst');
        if(wartosc.length==0){
      insert=false;
        }
    }
      }
  }

  wartosc='[div=' + link + ']' + wartosc + '[/div]';


  break;


  case 'html':

  if(kreator){
      if(zaznaczony!=true){
    wartosc=prompt('Podaj kod html który chcesz wstawić:','kod');
    if(wartosc.length==0){
        insert=false;
    }
      }
  }

  wartosc='[HTML]' + wartosc + '[/HTML]';

  break;


  case 'strona':

  if(zaznaczony!=true&&insert){
      wartosc=prompt('Podaj nazwę podstrony:','podstrona');
      if(wartosc.length==0){
    insert=false;
      }
  }
  if(wartosc.length>0){
      wartosc=':'+wartosc;
  }

  wartosc='[strona' + wartosc + ']';

  break;


  case 'wstep':

  if(pole_.value.split('[wstep').length>1){
      alert('W tek¶cie znajduje się już znacznik wstępu lub strony! Nie mozn± wstawiać znacznika wstepu');
      insert=false;
  }


  if(zaznaczony!=true&&insert){
      wartosc=prompt('Podaj odno¶nik na zakończenie wstępu:','kontynuuj...');
      if(wartosc.length==0){
    insert=false;
      }
  }
  if(wartosc.length>0){
      wartosc=':'+wartosc;
  }
  wartosc='[wstep' + wartosc + ']';

  break;

  default:

  wartosc=znazanczony_tekst;

  break;

    }

    if(insert){
  add(wartosc,pole);
    }

}

var jestemwoknie=0;


function add(add1,pole) {
    if(jestemwoknie==1){
  pole_ = opener.document.getElementById(pole);
  seel=opener.document.selection;
    }else{
  pole_ = document.getElementById(pole);
  seel=document.selection;
    }
    pole_.focus();
    if (seel) {
  sel = seel.createRange();
  sel.text = add1;
    }
    else if (pole_.selectionStart || pole_.selectionStart == 0) {
  var startPos = pole_.selectionStart;
  var endPos = pole_.selectionEnd;
  pole_.value = pole_.value.substring(0, startPos)+add1+pole_.value.substring(endPos, pole_.value.length);

    } else {
  pole_.value += add1;
    }
}

Tak w kwestii wyjasnienia - skrypt wstawia bbcode do textarea o id pole - podawanym jako parametr - uwzglednia zaznaczenie itd - mozna mu podawac jakies wlasne tagi - i wystarczy do tego prosta znajomosc js

Ten post edytował occulkot 5.02.2006, 14:56:57

[gam3r]

oo dzienks, akurat coś podobnego znalazłem na phpclasses.org ale mam problem z zaimpletowaniem tego - robię jak autor kazał i nic (same errory), po kilku zmianach już lepiej, ale pasek który otrzymałem jest mocno zniekształcony, więc jeżeli możesz to pokaż jak tego twojego moge użyć cio? sory że męczę ale nie bardzo wiem jak konkretnie tego użyć

Ten post edytował gam3r 10.02.2006, 11:59:29