Nwlapcug.com


Come creare un elaboratore di testo all'interno di una pagina Web

Come creare un elaboratore di testo all'interno di una pagina Web


Un'applicazione standard word processor consente di evidenziare il testo e modificare il suo stile, dimensione, tipo di carattere e altre proprietà con il clic di un pulsante, mentre l'area di testo di una pagina Web normale consente di immettere solo il testo normale. Qualcuno esperto con JavaScript potrebbe aggiungere questa funzionalità, ma facendo così richiederebbe ore di lavoro e centinaia di linee di cavo. Fortunatamente, ci sono un numero di download gratuito, open source disponibili che consentono un Webmaster aggiungere funzionalità WYSIWYG ("quello che vedete è che cosa ottenete") alle sue pagine in pochi minuti.

Istruzioni

Utilizzando openWYSIWYG

1

Scarica il file ZIP openWYSIWYG, che può essere trovato nella sezione risorse.

2

Decomprimere e caricare i file sul server Web. Assicurarsi che la directory e i singoli file sono accessibili dagli utenti remoti.

3

Aggiungere lo script per il codice HTML della pagina che si desidera utilizzare l'editor su. Se il tuo sito Web è miosito.com, e avete lo script memorizzato nella directory wysiwyg, si utilizzerà la seguente riga di codice:

& lt; script language = "JavaScript" type = "text/javascript" src = "http://www.mysite.com/wysiwyg/wysiwyg.js & quot; & amp; gt; & amp; lt; / script & amp; gt;

4

Creare l'area di testo che si desidera utilizzare. Essere sicuri di dare un ID.

& lt; textarea id = "example_textarea" & gt; & lt; / textarea & gt;

5

Aggiungere il codice JavaScript che consente proprietà WYSIWYG di area di testo.

& lt; script language = "JavaScript" & gt;
generate_wysiwyg('example_textarea');
& lt; / script & gt;

Utilizzando CKEditor

6

Scaricare il file ZIP CKEditor, che può essere trovato nella sezione risorse.

7

Decomprimere e caricare i file sul server Web. Assicurarsi che la directory e i singoli file sono accessibili dagli utenti remoti.

8

Aggiungere lo script per il codice HTML della pagina che si desidera utilizzare l'editor su. Se il tuo sito Web è miosito.com, e avete lo script memorizzato nella directory wysiwyg, si utilizzerà la seguente riga di codice:

& lt; script language = "JavaScript" type = "text/javascript" src = "http://www.mysite.com/wysiwyg/ckeditor.js & quot; & amp; gt; & amp; lt; / script & amp; gt;

9

Creare l'area di testo che si desidera utilizzare. Essere sicuri di dare un ID.

& lt; textarea id = "example_textarea" & gt; & lt; / textarea & gt;

10

Aggiungere il codice JavaScript che consente proprietà WYSIWYG di area di testo.

& lt; script type = "text/javascript" & gt;
CKEDITOR.replace ('example_textarea');
& lt; / script & gt;

Utilizzando TinyMCE

11

Scaricare il file ZIP di TinyMCE, che può essere trovato nella sezione risorse.

12

Decomprimere e caricare i file sul server Web. Assicurarsi che la directory e i singoli file sono accessibili dagli utenti remoti.

13

Aggiungere lo script per il codice HTML della pagina che si desidera utilizzare l'editor su. Se il tuo sito Web è miosito.com, e avete lo script memorizzato nella directory wysiwyg, si utilizzerà la seguente riga di codice:

& lt; script type = "text/javascript" src = "http://www.mysite.com/wysiwyg/tiny_mce.js & quot; & amp; gt; & amp; lt; / script & amp; gt;

14

Aggiungere lo script che fa sì che tutte le aree di testo per eseguire il rendering utilizzando TinyMCE.

& lt; script type = "text/javascript" & gt;
tinyMCE.init({
modalità: "textareas"
});
& lt; / script & gt;

15

Creare un'area di testo con gli attributi HTML normali che si desidera possedere.

& lt; textarea nome = "esempio" cols = "50" righe = "15" & gt; & lt; / textarea & gt;

Consigli & Avvertenze

  • È possibile aggiungere dati tra tag le aree di testo per impostare il loro contenuto predefinito, proprio come con l'HTML standard.
  • Quando moduli di invio di utenti, il contenuto delle aree di testo verrà inviato come HTML, consente di visualizzare facilmente su un'altra pagina.
  • Ciascuno degli editori WYSIWYG ha molte altre impostazioni. Si può trovare una lista completa nella documentazione in linea dell'editor.
  • Essere sicuri che le autorizzazioni della directory per gli script siano impostate a 755 o superiore e che i file sono impostati a 644 o superiore. Autorizzazioni inferiori impedirà agli utenti di accedere agli script.