Girare TEXTAREA nell'editor (WYSIWYG | CKEditor)

Ecco una guida rapida per integrare CKEditor con applicazioni Web in soli tre passaggi.

Presentazione

Girare il vostro Tag TEXTAREA in un editor Web non è più un compito complicato. Tra i molti redattori che si possono trovare su Internet, Vediamo l'uso di CKEditor. Vedere l'editor in azione in questo DEMO.

Installazione

Scarica il CKEditor in http://ckeditor.com/download. La versione utilizzata in questo Post è stato 3.6.4, di 17 Jul 2012. Estrarre il file. ckeditor_3.6.4.zip insieme all'applicazione. Una cartella CKEditor verrà creato. Presto, Ora basta fare la chiamata all'interno del codice sorgente!

Integrazione

Il CKEditor è un'applicazione JavaScript. Per leggerlo, Basta fare una semplice chiamata a lui entro il Tag TESTA del codice sorgente. Fatto, l'API Javascript del CKEditor sarà già pronto per l'uso. Ricordarsi di regolare il percorso del file CKEditor.js nella directory dove è stato decompresso.

Passo 1 – Effettuare la chiamata al CKEditor
1
2
3
  <testa>
    <tipo di script="text/javascript" src="ckeditor/ckeditor.js"></script>
  </testa>
Passo 2 – Creare un campo TEXTAREA
1
2
3
  <corpo>
    <TextArea Identificativo="editor1" nome="editor1">&Lt;p&GT;Valore iniziale.&Lt;/p&GT;</TextArea>
  </corpo>
Passo 3 – TEXTAREA stato (ID) verrà sostituito con CKEditor
1
2
3
4
5
6
7
  <testa>
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione()  {
        CKEDITOR.sostituire( 'editor1' );
      };
    </script>    
  </testa>

Presto, opere già! Non ci credo? Salva, qualunque sia la “F5” nel browser e vedere di persona… il codice completo è simile al seguente:

Codice completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <testa>
    <titolo>CKEditor</titolo>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione()  {
        CKEDITOR.sostituire( 'editor1' );
     };
    </script>
  </testa>
  <corpo>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;Valore iniziale.&Lt;/p&GT;</TextArea>
      <input type="submit" value="Submit" />
    </modulo>  
  </corpo>
</HTML>

Naturalmente,, Ora è necessario apportare le modifiche come l'applicazione, a partire impostando il azione del modulo, processo e che indica che la pagina recupererà i dati inviati via posta.

L'articolo termina qui, ma ti lascio qualche altre perle per i curiosi:

Suggerimenti

(1) Nessun evento onload, con classe =”CKEditor”

Se si assegna la classe “CKEditor” per il tuo TEXTAREA, Sarà automaticamente convertito a un CKEditor, senza bisogno di usare lo script chiamato dall'evento. “OnLoad”, Beh semplice:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <testa>
    <titolo>CKEditor</titolo>
    <contenuto di meta="text/html; charset = utf-8" http-equiv="content-type" />
    <tipo di script="text/javascript" src="ckeditor/ckeditor.js"></script>
  </testa>
  <corpo>
    <azione modulo="request.php" Metodo.="post">
      <TextArea classe="ckeditor" ID="editor1" nome="editor1">&Lt;p&GT;Valore iniziale.&Lt;/p&GT;</TextArea>
      <tipo di input="submit" valore="Submit" />
    </modulo>  
  </corpo>
</HTML>

(2) Interruzione di riga cambia <p> da <BR />

Ho notato due modi di scambiare P BR quando entra in teclamos. Il primo, è impostare il parametro enterMode con valore 2, Dal 1 = P, 2 = BR e 3 = DIV.

1
2
3
4
5
6
7
  <testa>  
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione() {
        CKEDITOR.sostituire( 'editor1', {enterMode: Numero(2)} );
      };
    </script>
  </testa>

O così, aprire il file config. js e impostare qualcosa di simile:

1
2
3
CKEDITOR.editorConfig = funzione( config ) {
  config.enterMode = CKEDITOR.ENTER_BR;
};

In questo caso, Quando si digita invio, Abbiamo le opzioni:
CKEDITOR. ENTER_P – nuovo paragrafo P viene creato;
CKEDITOR. Interruzione di ENTER_BR-riga con BR;
CKEDITOR. ENTER_DIV-nuovo blocco con DIV viene creato.

Nelle vicinanze consigliamo e aprire il browser per vedere il risultato

Questo cambiamento, perché possono essere memorizzati nella cache! Se ancora non funziona, pulire la cache del browser.

(3) Modificare il colore di sfondo della barra di CKEditor

Come avrete notato, Possiamo fare i cambiamenti nel nostro CKEditor assegnazione dei parametri direttamente il CKEDITOR o tramite file config. js. Pertanto, Illustrerò solo uno dei:

1
2
3
4
5
6
7
  <testa>  
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione() {
        CKEDITOR.sostituire( 'editor1', {UIColor: '#ff0000'} );
      };
    </script>
  </testa>

(4) Combinando i parametri di configurazione del CKEditor

I parametri di configurazione del CKEditor possono essere combinati. Per soddisfare le possibilità, Date un'occhiata al Config API. Esempio:

1
2
3
4
5
6
7
8
9
10
11
12
  <testa>  
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione() {
        CKEDITOR.sostituire( 'editor1', {  UIColor: '#ccc',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'ckeditor/outroConfig.js',
                                        lingua: 'it'        
                                      } 
                        );
      };
    </script>
  </testa>

(5) Lingue supportate in CKEditor

I supporti di CKEditor 58 Lingue, compresi “it”. Vedi più a Lingue dell'interfaccia utente. Nell'esempio sopra riportato di seguito viene illustrato l'utilizzo.

(6) Personalizzazione della barra degli strumenti

– Nozioni di base

Non è possibile fornire tutte le caratteristiche di CKEditor. Allora, Perché non ottimizzare la barra degli strumenti secondo il vostro bisogno? Il seguente è un esempio lasciando l'editor molto semplice.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <testa>  
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione() {
        CKEDITOR.sostituire( 'editor1', {
                           barra degli strumenti:
                           [
                             { nome: 'basicstyles', elementi : [ 'Bold','Corsivo' ] },
                             { nome: 'paragrafo', elementi : [ 'NumberedList','BulletedList' ] },
                             { nome: 'strumenti', elementi : [ 'Ottimizzare','-','Chi' ] }
                           ]}         
                         );
      };
    </script>
  </testa>

– Completare

Il seguente è un esempio completo. Rimuovere i pulsanti che non si desidera.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <testa>  
    <tipo di script="text/javascript">
      finestra.OnLoad = funzione() {
        CKEDITOR.sostituire( 'editor1', {
                           barra degli strumenti: [
                             { nome: «documento», elementi : [ 'Source','-','Salva','NewPage','DocProps','Anteprima','Stampa','-','Modelli' ] },
                             { nome: 'appunti', elementi : [ 'Taglio','Copia','Incolla','PasteText','PasteFromWord','-','Annulla','Ripeti' ] },
                             { nome: 'modifica', elementi : [ 'Trova','Replace','-','SelectAll','-','SpellChecker', 'Scayt' ] },
                             { nome: 'form', elementi : [ 'Form', 'Casella di controllo', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { nome: 'basicstyles', elementi : [ 'Bold','Corsivo','Sottolineare','Colpo','Indice','Apice','-','RemoveFormat' ] },
                             { nome: 'paragrafo', elementi : [ 'NumberedList','BulletedList','-','Outdent',"Indent",'-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { nome: «link», elementi : [ 'Link','Unlink','Anchor' ] },
                             { nome: 'inserire', elementi : [ 'Immagine','Flash','Tabella','Inserthorizontalrule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { nome: 'stili', elementi : [ 'Stili','Format','Font','FontSize' ] },
                             { nome: 'colori', elementi : [ 'TextColor','BGColor' ] },
                             { nome: 'strumenti', elementi : [ 'Ottimizzare', 'ShowBlocks','-','Chi' ] }                            
                           ]}         
                         );
      }; 
    </script>
  </testa>

– Moderato

Si tratta di un esempio più moderato, con uno strumento solo bar, ma con le caratteristiche principali. Si noti che, tra cui, È possibile combinare e determinare l'altezza e la larghezza dell'Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<testa>  
  <tipo di script="text/javascript">
    finestra.OnLoad = funzione() {       
        CKEDITOR.sostituire( 'editor1', {
                           barra degli strumenti:
                           [
                             { nome: 'basicstyles', elementi : [ 'Bold','Corsivo','Sottolineare' ] },
                             { nome: 'paragrafo', elementi : [ 'NumberedList','BulletedList' ] },
                             { nome: 'paragrafo', elementi : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { nome: 'stili', elementi : [ 'Font','FontSize' ] },
                             { nome: 'colori', elementi : [ 'TextColor','BGColor' ] },
                             { nome: 'appunti', elementi : [ 'Taglio','Copia','Incolla','PasteFromWord','-','Annulla','Ripeti' ] },                             
                             { nome: 'strumenti', elementi : [ 'Ottimizzare','-','Chi' ] }
                           ],
                           Larghezza: "740px",
                           altezza: "200px"}
                         );
    };
  </script>
</testa>

(7) TextArea (CKEditor) vuoto quando si invia il modulo

Se il tuo Textarea/CKeditor appare vuoto (vuoto) Quando si invia il modulo, È possibile utilizzare questo “artificio” Ho creato sotto, che in realtà serve per ottenere il contenuto del CKEditor e giocare nella Textarea corrispondente. Questa operazione viene eseguita chiamando la funzione setCKEditorToTextarea() Quando si sceglie il pulsante per inviare (presentare o pulsante), normalmente nell'evento onclick() il pulsante.

1
2
3
4
5
6
<tipo di script="text/javascript">
      funzione setCKEditorToTextarea() {
        è(var InstanceName in CKEDITOR.istanze)
          CKEDITOR.istanze[InstanceName].updateElement();            
      }
</script>

Parole da parte dello sviluppatore

CKEditor è un editor di testo per essere utilizzato all'interno di pagine web. È un editor WYSIWYG, il che significa che il testo viene modificato dall'utente sarà più vicino possibile con la pubblicazione. Egli porta le funzionalità di modifica comuni di web, trovato nel desktop applicazioni di editing, ad esempio Microsoft Word e OpenOffice. Una volta che il CKEditor è concesso in licenza sotto licenze “Open Source” materia e commerciale, siete in grado di utilizzarlo in qualsiasi tipo di applicazione. Questo è l'editor ideale per gli sviluppatori, progettato per fornire soluzioni facili e potenti ai propri utenti.

Altri editori

Tipi di carattere

In primo luogo è che! Vedere il sito Web dello sviluppatore per ulteriori dettagli.

Visite totali: 58776

27 Commenti su “Girare TEXTAREA nell'editor (WYSIWYG | CKEditor)

  1. Post molto fresco, la parte a cui desidero utilizzare è relativo all'argomento 6, considerando che il CKEditor preferiti nel tuo codice html contenuto descritto all'interno della textarea bisogno di inviare il testo via e-mail con formato html ma è necessario salvare in BD in formato txt stesso. Avete qualche suggerimento che posso usare? :)

  2. Ronaldo ha detto:

    Ragazzo, Sto sviluppando un progetto e una maschera dispone di due campi textarea.
    Sto usando il CKEditor in entrambi.

    Orario d'ufficio – Sinistra

    CKEDITOR. Sostituisci( ' expedienteEsq’ );
    CKEDITOR.add

    Orario d'ufficio – Ok

    CKEDITOR. Sostituisci( ' expedienteDir’ );
    CKEDITOR.add

    L'editor viene applicato correttamente. Ma quando il modulo elabora un file php solo riceve i dati dal primo campo e la seconda decade.

    Si tratta di un problema con CKEditor? perché se non lo usi ottenere dati da due campi normalmente
    .
    Ho usato la struttura suggerita dal sito stesso il CKeditor.

    • Ciao Ronaldo, Ho fatto un test di qui e non c'era nessun problema. Effettuare le seguenti operazioni, prendere il codice qui sotto, mettere in un file “test.php” all'interno del server, ma isolato dall'applicazione che sta dando problemi. Si noti che quando si invia il modulo con due textarea (CKEditor), i dati verranno inviati normalmente.

      Teste.php file (DUE TEXTAREAS SIMULTANEA)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <testa>
          <titolo>CKEditor</titolo>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
          <script type="text/javascript">
            Window. onLoad = function()  {
              CKEDITOR. Sostituisci( 'editor1' );
              CKEDITOR. Sostituisci( 'editor2' );
           };
          </script>
        </testa>
        <corpo>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Valore iniziale 1</TextArea>
            <textarea id="editor2" name="editor2">Valore iniziale 2</TextArea>
            <input type="submit" value="Submit" />
          </modulo>  
        </corpo>
      </HTML>
      <?PHP Eco ' Editor 1 ---> '.@$_ RICHIESTA['editor1'].'<BR />'; ?>
      <?PHP Eco ' Editor 2 ---> '.@$_ RICHIESTA['editor2'].'<BR />'; ?>
  3. Ronaldo ha detto:

    Ho provato a passare il codice ma non credo che è stato pubblicato. Ma sai che cosa è errato con diritto? CKEditor uso solo una delle textarea invia dati a un altro sono vuoti.

    • Ok, Credo di che capire. Come mostrato sopra, Non ho avuto lo stesso problema. Pertanto, reanalise codice, vedere se non hai più di un campo (ingresso) con lo stesso nome (nome). Abbracci!

      • Ronaldo ha detto:

        Ho deciso con il tuo suggerimento…. (6) TextArea (CKEditor) vuoto quando si invia il modulo

        È stato sufficiente a mettere la funzione c'e ok :) In questo modo che è stato passato è utilizza php diritto? Anche le pagine in php distribuito l'editor utilizzando javascript.
        Grazie per i suggerimenti

        sfruttando anche se q non è l'argomento del post, Programmare a lungo con java e .net e php per meno tempo e sto raccogliendo con conversione della data in stringa. Non è una funzione diretta, Come stringa di data (strtotime) Ok? Pensi di conoscere php bene più q ho. Se sai questa cosa inviare alla mia e-mail ronaldodantas2@gmai.com

        Non c'è bisogno di pubblicare questo commento. Grazie per i suggerimenti.

  4. Ciao Taylor molto buona il tuo post.

    Già installato e sto usando funziona bene. Ho un dubbio, ad esempio nel tuo blog hai inserito nelle caselle gialle con script. Come hai fatto questo? E una funzionalità di ckeditor?

    Grazie

  5. Fernando ha detto:

    Come ad attivare il carattere speciale di th(1 PRIMO) e th(2 ° SECONDO) A MENO CHE NON FARE CLIC SULLO STRUMENTO DI CARATTERE SPECIALE INSERTO? MI PIACEREBBE FARE QUESTO DURANTE LA DIGITAZIONE SULLA TASTIERA STESSA SENZA APRIRE ALCUNA FINESTRA.

    • Ragazzo, testato qui e non solo la forma convenzionale che funziona, IE, tenere premuto il tasto ALT e digitare la sequenza di numeri corrispondente al simbolo desiderato. Esempio: ALT + 166 = Rd e ALT + 167 = °. Ha detto!

  6. James ha detto:

    Buongiorno, molto buono il tuo post, Sto iniziando a lavorare con javascript ora, e ho bisogno di creare un testo editor, Pensato di che utilizzare il ckeditor, ma con la difficoltà di essere in grado di manipolare, Vorrei solo che si digiterà , Salva, Nuovo, Annulla, Redo, Incolla, copia, e una scelta di lingua, solo che invece di essere una forma di scrittura, Esso sarebbe essere linguaggi di programmazione, e poi avrebbe dovuto gestire i dati ricevuti, un po' come un editor di codice fonte normale, solo online, Se potete aiutarmi.

    • Oops, che ci può essere qualcosa con l'editor che si utilizza per scrivere il codice. Provare a utilizzare un blocco note e inserire l'esempio di codice HTML completo, e vedere se il problema rimane.

      Provare inoltre impostare criteri che dire alla tua pagina che impostata il set di caratteri da utilizzare (ISO-8859-1 o UTF-8).

      1
      2
      3
      4
      5
      
      <corpo>
        <testa>
            <meta charset="UTF-8">
        </testa> 
      ...

      Se stai usando PHP, impostare il set di caratteri all'inizio del codice, prima di tutto:

      1
      
        <?PHP intestazione("Content-Type: testo/html;  charset = ISO-8859-1",VERO) ?>

      O, provare a trattare il contenuto delle richieste utilizzando il set di caratteri corretto:

      1
      
        htmlentities( utf8_decode($_ POST['variabile']) );

      Il fatto è che il problema che citato non mi sembra il CKEditor, a perché usarlo in vari applicazioni e non ho nessun problema con carattere speciale. Provato anche la DEMO sul sito dello sviluppatore, e ho non visto nessun problema. Veda là: http://ckeditor.com/demo

  7. Marcio ha detto:

    Buon pomeriggio, sto cercando di ottenere il testo nel campo sottostante tramite javascript per inviare al database ma non posso, C'è qualche metodo per ottenere il testo?
    Grazie

  8. Buon pomeriggio.
    Sto pensando di utilizzare questo dispositivo per il medico di prescrizione – qualcosa di così semplice anche.
    – Vuoi sapere come configurare la barra superiore (dove si trova la funzionalità) Nascondi (come un piccolo pulsante per farla scomparire dopo la modifica del testo)
    – Inoltre come a sbarazzarsi della barra inferiore (dove compare “corpo” e altri tag) ?
    – Come fare la casella di testo con un “altezza” Automatico: tipo digitare, Se prescrivere 10 la casella sarà encompridando farmaci mentre sto scrivendo… Se digito solo 1 il farmaco è all'altezza della casella di digitazione…

    • Ciao, Mi dispiace, C'erano alcuni tagli (fallimenti) nel codice, così ho finito per rimuoverlo.

      Su questo hai bisogno, È perfettamente possibile, ma vorrei suggerire alla ricerca di un professionista che capisce JavaScript per aiutarti.

      Mi limiterò a dire il modo di pietre:

      – Nascondere la barra degli strumenti (barra degli strumenti):

      1
      2
      3
      
      var Editor = CKEDITOR.inline( 'editor1', {
          removePlugins: 'toolbar'
      } );

      – Nascondere il piè di pagina (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Aumentare l'altezza automaticamente (aumento automatico delle dimensioni):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (dimostrazione)

      Esempio:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      23
      24
      25
      
      <HTML>
        <testa>
          <titolo>CKEditor</titolo>
          <contenuto di meta="text/html; charset = utf-8" http-equiv="content-type" />
          <script src="http:////CDN.CKEditor.com/4.5.3/Basic/CKEditor.js"></script>
          <script src="plugin.js"></script>  <!-- Prendi plugin.JS su http://CKEditor.com/addon/AutoGrow-->  
          <tipo di script="text/javascript">
           finestra.OnLoad = funzione()  {
              CKEDITOR.sostituire( 'editor1', {             
                  removePlugins: 'elementspath', 
                  removePlugins: 'toolbar',
                  extraPlugins: 'aumento',
                  autoGrow_minHeight: 70,
                  altezza: '70px'
              });
           };
          </script>
        </testa>
        <corpo>
          <azione modulo="request.php" Metodo.="post">
            <TextArea Identificativo="editor1" nome="editor1">Testo iniziale.</TextArea>
            <tipo di input="submit" valore="Submit" />
          </modulo>  
        </corpo>
      </HTML>
  9. Claudio ha detto:

    Ciao Taylor, Complimenti per il post molto ben spiegato. Voglio utilizzare questo editor in un'applicazione PHP e vorrei sapere come creare una combo (o pulsante) sulla barra degli strumenti per portare dati BD da inserire nel testo? IE, Quando si fa clic su un pulsante si apre una finestra di dialogo con il risultato di una query per selezionare un record.
    Si può?

  10. Glaydison Silva ha detto:

    Ciao, ótimo post. Poderia sugerir post um novo? Preciso de ajuda para attuabile um botão para carica de imagens, uguale alla DEMO dove è possibile spostare al server e tali. Non posso affatto.

Lasciare una risposta

L'indirizzo email non verrà pubblicato. Campi obbligatori sono contrassegnati con *