editor WYSIWYG: gestire font size in pixel. Uso le Regular Expressions?

[csar1992]

Ciao a tutti,
mi ritrovo con un altro problema nella mia implementazione di un WYSIWYG editor che utilizza un iframe con design mode='ON'.

Il punto è questo: Il commando execcommand("fontsize") accetta come parametro un valore da 1 a 7. Vorrei però consentire agli utenti di poter variare la dimensione del testo selezionato in pixel e in questo modo allargare il raggio di grandezza fino a circa 96px. Grandezze maggiori mi servono soprattutto per la personalizzazione di T-Shirts.
Ho girato ore per Internet ma non ho trovato una soluzione.

Stavo pensando di utilizzare le regular expressions, ma non ne ho conoscenze avanzate. Siccome posso ricavarmi il testo selezionato potrei creare un tag span con style='font-sizex selezionato', ma quale è il pattern da effettuare? Cioè, avendo come testo selezionato la stringa 'abc' come faccio a mettergli davanti il tag span di apertura e quello di chiusura alla fine?

[csar1992]

Un'altra possibilità (però più machiavellica e forse meno elegante) a cui stavo pensando è questa:
Assumendo che abbia selezionato la stringa 'abcde' e voglia ingrandirla a 72 px, lancio comunque il comando execcommand('fontsize') con un valore a caso tra 1 a 7.

Questo, almeno in IE, mi formatta l'HTML nel seguente modo (obbrobrio! ):
<font size=7>abcde</font>.

Poi potrei usare una funzione simile a puliscicodice() presente nell'articolo di Maurizio Blasilli http://javascript.html.it/articoli/l...tor-wysiwyg/4/ che usa delle regular expressions per fare il replace dei tag. In questo caso sostituirei il tag <font size=7> con <span style=font-size:...px> e come valore ci metto la dimensione selezionata dall'utente, salvata precedentemente in una variabile.
In ogni caso quella stessa funzione non funziona completamente, perché non presuppone che lo stesso testo selezionato potrebbe avere più di una formattazione (es. bold + color + size). Il replace funziona solo se il testo selezionato ha un'unica formattazione.

In teoria dovrebbe funzionare ma in pratica non so come si fa

Spero di non essere stato troppo contorto :master:

[csar1992]

Up.
Qualche mago delle regular expressions mi può aiutare?

[csar1992]

[csar1992]

We, ma qualcuno disposto a rispondermi c'è? :master:

[Anªkin]

Ciao,
non so se ho capito bene, dovresti postare un esempio di stringa di partenza da cui estrarre il testo da incapsulare nel tuo span.
A meno che tu non intenda testo selezionato "col mouse" all'interno di tutto il testo contenuto nella tua textarea.

[csar1992]

Ciao, grazie per la disponibilità
Allora, innanzitutto non utilizzo una textarea ma un iframe con design mode='ON'.

Come già detto pensavo a due modi per fare quanto richiesto.
1) Ad esempio, ho un testo selezionato all'interno di una stringa più lunga. Io a quel testo selezionato devo mettergli davanti il tag <span style='font-size:...px;'> e alla fine il tag </span>. Come si fa ad estrarre il testo selezionato sono capare, ma non so come inserire i tag ai lati. La complicazione è che lo stesso testo selezionato può avere in precedenza un altro tipo di formattazione (bold, italic, underline, colore del testo, ecc.). Quindi l'operazione non è così semplice. Mi spiego:

Ho la stringa "test test". Mettiamo il caso più semplice, cioè che io selezioni tutta la stringa "test test" e voglio aumentare le dimensioni del font (es. 52px).
Io devo creare una funzione che sull'HTML alla fine mi scriva <span style='font-size:52px;'>test test</span>. Però se "test test" è per esempio già formattato con il colore rosso sul documento già mi trovo <span style="color:#ff0000;">test test</span> e certo non posso fare un obbrobrio con due span annidati <span style="color:#ff0000;"><span style='font-size:52px;'>test test</span></span>, ma sarebbe preferibile fare così <span style='color:#ff0000; font-size:52px;'>test test</span>. Per non parlare poi dei casi in cui il testo colorato non è perfettamente coincidente con quello che vuoi ingrandire (in quanto potrebbe corrispondere ad una parte della stringa “test test”, oppure nel caso inverso).
Come diavolo deve essere questa funzione che faccia questi controlli? Credo che servano le regular expressions ma non ho idea come fare.

2) La seconda soluzione è forse meno complicata (anche se più "sporca"). Potrei utilizzare il comando execcommand('fontsize') che automaticamente vede il testo selezionato e mi crea il tag di formattazione. Però, come detto, questo comando non accetta come parametro i pixel ma i valori da 1 a 7 . Ma potrei comunque usarlo e poi fare il replace inserendo il valore in pixel che mi serve. Il problema nasce a questo punto dal fatto che a seconda del browser usato il comando execcommand('fontsize') scrive un codice HTML differente (e in alcuni casi con tag deprecati).
Con IE, Firefox e Opera scrive così:
<FONT size=7>test test</FONT>
Con Google Chrome e Safari:
<span class="Apple-style-span" style="font-size: -webkit-xxx-large;">test test</span>
(spero che non cambi il codice anche tra differenti versioni dello stesso browser).
In tutti i browser il risultato finale dovrà essere <span style='font-size:52px;'>test test</span>.

Anche in questo secondo modo credo dovrei usare le regular expression, ma non so il pattern da usare. Inoltre si ripropongono gli stessi problemi di quelli accennati al primo punto (se il testo ha già una formattazione, ecc.).

Spero di essere stato chiaro. Chi mi può aiutare? Anche con eventuali alternative all’uso delle regular expression.

[cavicchiandrea]

Prova a leggere qui ma la vedo durissima, per quello che vuoi fare tu (se possibile) si deve conoscere molto bene il javascript, e non mi sembra tu ne abbia le qualità (senza offesa), poi mi sbaglio io ed è una stupidata.
Per esperienza quando ho avuto a che fare con editor html ho sempre tribolato, spero x te che non sia cosi anche questa volta.
Eventualmente hai/potresti prendere in considerazione flash? Lo vedo + appropriato è solo un pensiero senza avere la ben che minima conoscenza del linguaggio (caso mai mi sbaglio x la seconda volta).
Qualunque cosa tu decida ti auguro di risolvere

[csar1992]

Originariamente inviato da cavicchiandrea
Prova a leggere qui ma la vedo durissima, per quello che vuoi fare tu (se possibile) si deve conoscere molto bene il javascript, e non mi sembra tu ne abbia le qualità (senza offesa), poi mi sbaglio io ed è una stupidata.
Per esperienza quando ho avuto a che fare con editor html ho sempre tribolato, spero x te che non sia cosi anche questa volta.
Eventualmente hai/potresti prendere in considerazione flash? Lo vedo + appropriato è solo un pensiero senza avere la ben che minima conoscenza del linguaggio (caso mai mi sbaglio x la seconda volta).
Qualunque cosa tu decida ti auguro di risolvere

Ora, a parte la sottile e gratuita offesa senza sapere nulla di me (comunque vabbè ), ti vorrei far notare che l'editor l'ho già quasi finito. E non è un semplice wysiwyg editor ma ha inoltre la possilità di draggare e ridimensionare le caselle di testo e/o le immagini, più altre funzioni, tipo Vistaprint per intenderci.
L'articolo che mi hai passato già lo conosco, ed inoltre l'ho anche linkato nel mio primo post.

A parte questo, ti ringrazio comunque per la disponibilità e amici come prima

[k.b]

Intervengo su richiesta anche se ignorante in materia Javascript

La rielaborazione del codice degli span non e' un problema in se', il (mio) problema e' come farlo in javascript. Ad esempio, tu selezioni "test test" e poi? Quella stringa viene passata da sola a una funzione? Perche' se e' cosi' non so se c'e' modo di risalire al contesto per vedere se la stringa era gia' contenuta in un tag <span> oppure no. I problemi sostanzialmente sono due: recuperare i dati in ingresso che ti servono e la sintassi