Minimalny WYSIWYG

[Kaviorek]

witam,

potrzebuję prostego edytora WYSIWYG, takiego na kilka przycisków, dla: b,i,u, itd..

jak wstawianie BBcode, czyli bez formatowania w textarea, a jedynie dodanie samych znaczników,

dostępne skrypty są wielkimi kombajnami js, nie daję rady wyciągnąć sobie tego co mi trzeba,

czy mógłbym ktoś podać przykład takiej funkcji? wstawienie kodu po dwóch stronach zaznaczonego fragmentu?

pzdr,

K

[shad]

hymmmm :?

JS

//-------------------------------------------
// UBBC Code
//-------------------------------------------
// inicjacja edytora
// onload=function(){
// 	input_text=document.getElementById('tresc')
// }

stos=[];
T=[];
C=alert;
B=unescape;


function init_ubbc(id){
input_text=document.getElementById(id)
}

function insert_tag(x){
document.selection ? (input_text.focus(), document.selection.createRange().text=x)
:(input_text.selectionStart || input_text.selectionStart=='0') 
? input_text.value=input_text.value.substring(0,input_text.selectionStart) + x 
+ input_text.value.substring( input_text.selectionEnd, input_text.value.length)
:input_text.value +=x;
input_text.focus()
}

function s(){
return document.selection ? document.selection.createRange().text:input_text.value.substring(
input_text.selectionEnd || 0, input_text.selectionStart || 0)
}



function set_tag(i,x){
document.getElementById(i).value=i+x
}

function close_all_tag(e){
while(stos[0]){
	insert_tag('[/'+(e=stos.pop())+']');
	T[e]=0;
	set_tag(e,'')
}
}

function R(x){
T[x] ? '' : T[x]=0;
T[x] ? CT(x):(stos.push(x),T[x]=1,insert_tag('['+x+']'),set_tag(x,'*'))
}


function CT(x,a){T[a=stos.pop()]=0;
insert_tag('[/'+a+']');
set_tag(a,'');
a!=x?CT(x):''
}

//
// Wywolania
//

function insert_code(x,z){
(z=s())?insert_tag('['+x+']'+z+'[/'+x+']'):R(x)
}

function select_to_code(l,t){
insert_tag("["+t+"="+l.value+"]"+s()+"[/"+t+"]")
}

function list(x,li){
x='[list]\n';
do{li=prompt('Wpisz element listy (jesli chcesz zakonczyc dopisywanie do listy pozostaw pole puste lub kliknij \'Anuluj\'','');
	x+=li?'[*]'+li+'[/*]\n':''
}
while(li);
insert_tag(x+'[/list]')
};

function url(u,d,z){
insert_tag("[url="+(u=prompt("Podaj adres strony lub pliku","https://"))+"]"+(s()?s():((d=prompt("Opis odnosnika",""))?d:u))+"[/url]")
}

function img(z){
insert_tag("[img="+((z=s())?z:prompt("Podaj sciezke do grafiki","https://"))+"]")
}

function qot(t){
insert_tag("[quote"+((t=prompt('Podaj imie cytowanej osoby'))?"="+t:"")+"]"+s()+"[/quote]")
}

function hide(t){
insert_tag("[hide"+((t=prompt('Tytuł bloku'))?"="+t:"")+"]"+s()+"[/hide]")
}

wywołanie

<input id="b" value="b" onclick="insert_code('b')" type="button" />
<input id="i" value="i" onclick="insert_code('i')" type="button" />
<input id="u" value="u" onclick="insert_code('u')" type="button" />
<input id="c1" value="c1" onclick="insert_code('c1')" type="button" />
<input id="c2" value="c2" onclick="insert_code('c2')" type="button" />
<input id="c3" value="c3" onclick="insert_code('c3')" type="button" />

przykład

https://podbeskidzie.eu/ksiega/ksiega_add.htm

[Mar]

@shad, nie wiem czy można to nazwać WYSIWYG (What You See Is What You Get)...

Tu chodzi o coś takiego jak ma Wordpress, ja mam coś takiego:

Mar.

[Kaviorek]

super, dziękuję!

zaraz się zabiorę za powyciąganie tego co trzeba z podanego przykładu,

w tych przykładach co znalazłem wcześniej (qlweb by jachu najmniejszy) było tyle kodu narąbane, że nie dałem rady uruchomić skryptu, choć funkcji się doszukiwałem

Mar, błąd w temacie zrobiłem, chciałem później zmienić, ale nie można edytować,

chodziło mi raczej o proste BBcode, napisałem w treści: bez formatowania w textarea, a jedynie dodanie samych znaczników,

[k3rn3l]

Obejrzyj tinymce. Fakt jest to kombajn, ale możesz go dowolnie pokonfigurować, żeby nie ładował całości a tylko wybrane moduły.

[zoreander]

Polecam Spaw

https://www.spaweditor.com

[yavaho]

Czy dla tinymce jest jakiś plugin aby mozna było jednym przyciskiem oczyścić wklejony kod?

Chodzi o to aby został czysty kod html bez parametrów styli itp wklejonych śmieci.

[k3rn3l]

Nie wiem czy jest jakiś dedykowany plugin, ale zobacz jak to jest robione w wordpressie.

[Maximus Marius]

tinymce to żaden kombajn, jak wlaczysz wszystko to masz rzeczywiście bizon-a

ale kto każe właczać wszystkie przyciski.

W skrócie tinymce rządzi

Jeżeli wymagan funkcjonalnośc jest w WP to latwo da sie to skopiowac

ewentualnie https://tinymce.moxiecode.com/plugins_thirdparty.php

i tam tez jest sporo wynalazków na Sourceforge TinyMCE plugins page.

[General_Depet]

Tu chodzi o coś takiego jak ma Wordpress, ja mam coś takiego:

Fajne a mógłbyś nakierować mnie na ten skrypcik ?? Być może przyda się do mojego następnego projektu SEOPrecel

[Orzech1990]

Tu chodzi o coś takiego jak ma Wordpress, ja mam coś takiego:

Fajne a mógłbyś nakierować mnie na ten skrypcik ?? Być może przyda się do mojego następnego projektu SEOPrecel

Jest to openWYSIWYG, który możesz pobrać tutaj

[pc3t]

https://www.mozilla.org/editor/midasdemo/