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
Pełna wersja: pasek narzędziowy
A może skorzystaj z jakiegoś edytora WYSIWYG.
Typu FCKEditor, TinyMCE lub InnovaEditor.
Typu FCKEditor, TinyMCE lub InnovaEditor.
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?
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?
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!! 
No to czemu nie FCKEditor albo TinyMCE 
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
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ę.
Nic nie stoi na przeszkodzie żebyś miał tylko: pogrubienie, podkreślenie i kursywę.
aaaa no to tego nie wiedziałem 
, to zainteresuje się tym 
, to zainteresuje się tym
No to rada, na przyszłośc, najpierw przeczytaj o czym i co Ci poelcamy, a później mó że to nie to
Pozdrawiam
Pozdrawiam
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?
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 
hehehe - milo ze komus sie moj kawalek kodu spodobal 
- tu masz wersje 2.0 - niezaimplementowana jeszcze w silniku owned:
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
- 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;
}
}
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
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ć
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ć
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.