Turn TEXTAREA pubblicatu (WYSIWYG | CKEditor)

Quì hè un beddu aiutu voi primurassi CKEditor cù a so appiicazioni Web in appena trè passi,.

presentatu

Accantu u vostru balise TEXTAREA nant'à un scrittore Web ùn più hè un compitu cumplessa. À mezu à i parechji scrittori chì vi pò truvà nantu à u internet, chì vede, o fà usu CKEditor. Vede u scrittore in azzione sta Ichine.

stallazione

Tags: l 'CKEditor in http://ckeditor.com/download. A versione usatu in issu articulu hè 3.6.4, di 17 Jul 2012. Tirà u cartulare ckeditor_3.6.4.zip cù u vostru prugrammu. un cartulare ckeditor hà da esse creatu. subitu, Avà appena fà una d 'nella u vostru còdice surghjente!

integrazione

U CKEditor hè una dumanda JavaScript. À leghje u, ghjustu fà una d 'sèmplice à ellu in u balise HEAD di u vostru còdice surghjente. fattu issu, API CKEditor JavaScript hè digià prontu per usu. Pensate à aghjustà u chjassu u schedariu ckeditor.js di u cartulare duve vo unzipped.

passu 1 – Fate la chiamata a CKEditor
1
2
3
  <testa,>
    <scrittura Type="text/javascript" SRC="ckeditor/ckeditor.js"></scrittura>
  </testa,>
passu 2Crie um campo TEXTAREA
1
2
3
  <corpu,>
    <textarea id="editor1" nomu="editor1">&lt;P p&gt;Valor inicial.&lt;/P p&gt;</textarea>
  </corpu,>
passu 3Diga qual TEXTAREA (Mappa) será substituído pelo CKEditor
1
2
3
4
5
6
7
  <testa,>
    <scrittura Type="text/javascript">
      window.onload = funziunava()  {
        CKEDITOR.replace( 'editor1' );
      };
    </scrittura>    
  </testa,>

subitu, já funciona! Não acredita? Salve, dê lá oF5no navegador e veja você mesmoo código completo fica assim:

Código completo

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html,>
  <testa,>
    <titulu>CKEditor</titulu>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></scrittura>
    <scrittura Type="text/javascript">
      window.onload = funziunava()  {
        CKEDITOR.replace( 'editor1' );
     };
    </scrittura>
  </testa,>
  <corpu,>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;P p&gt;Valor inicial.&lt;/P p&gt;</textarea>
      <input type="submit" value="Submit" />
    </forma>  
  </corpu,>
</html,>

chjaru, agora você precisa fazer os ajustes conforme sua aplicação, a começar definindo o maiò do seu FORM, mintuvendu a pagina chi vi ricercà è sbuccà u dati mandata Via POST.

L'articulu si compii qui, ma I Mulateri Di L'lascià un pocu di più ci scinnia di lu curiosu:

minichichje

(1) Souffre evento onload, classi it =”ckeditor”

Sè vo stabilisce la classi “ckeditor” à u vostru textarea, automaticamente u vi sò cunvirtuti nta un CKEditor, senza avè à aduprà la scrittura chjamata da evenimentu “onload”, è chjara:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html,>
  <testa,>
    <titulu>CKEditor</titulu>
    <cuntenutu mitacugnizioni="text/html; charset=utf-8" situ http-equiv="content-type" />
    <scrittura Type="text/javascript" SRC="ckeditor/ckeditor.js"></scrittura>
  </testa,>
  <corpu,>
    <azzione forma="request.php" mètudu="post">
      <textarea classi="ckeditor" Mappa="editor1" nomu="editor1">&lt;P p&gt;Valor inicial.&lt;/P p&gt;</textarea>
      <activité entrée="submit" valore="Submit" />
    </forma>  
  </corpu,>
</html,>

(2) ruttura linia scambiu <P p> da <fr />

I capisti dui maneri di cambià da P BR quandu teclamos entre. lu primu, Hè à crià u paràmetru enterMode cu valuri 2, postu chì 1 = P, 2 = BR e 3 = francese div.

1
2
3
4
5
6
7
  <testa,>  
    <scrittura Type="text/javascript">
      window.onload = funziunava() {
        CKEDITOR.replace( 'editor1', {enterMode: numaru(2)} );
      };
    </scrittura>
  </testa,>

o, apre u cartulare config.js e difinizzioni qualcosa cum'è:

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

in stu casu, à inconnu entre, Avemu ozzione:
CKEDITOR.ENTER_P - hè creatu novi comma P;
CKEDITOR.ENTER_BR - ruttura linia cu BR;
CKEDITOR.ENTER_DIV - nova pacchettu hè creatu cù francese div.

I preferimu chiudi è apre u navigatore à vede u risultatu

stu cambiamentu, perchè tù pò prènniri cache! Sè lu sempre ùn travagliu, smachjera u cache di u navigatore.

(3) Canciari lu culore di l 'Trpezarija CKEditor fond

As tu vidisti, Avemu pò fà cambiamenti in i nostri login CKEditor MASSIGNAC direttamente à oggettu ckeditor o attraversu u schedariu config.js. dunque, I Mulateri Di L'capisce cum'è unu di i modi:

1
2
3
4
5
6
7
  <testa,>  
    <scrittura Type="text/javascript">
      window.onload = funziunava() {
        CKEDITOR.replace( 'editor1', {Nordwestlicher: '# Ff0000'} );
      };
    </scrittura>
  </testa,>

(4) Cumminari i paràmetri di cunfigurazione CKEditor

U login cunfigurazione CKEditor pò assuciata. Cunnosce i pussibulità, piglià un ochju à API config. esempiu:

1
2
3
4
5
6
7
8
9
10
11
12
  <testa,>  
    <scrittura Type="text/javascript">
      window.onload = funziunava() {
        CKEDITOR.replace( 'editor1', {  Nordwestlicher: 'CCC',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'Ckeditor / outroConfig.js',
                                        lingua: 'Pt Pronuncia di-fr'        
                                      } 
                        );
      };
    </scrittura>
  </testa,>

(5) Lingue soutenu par CKEditor

O CKEditor suporta 58 lingue, cumpresu, o “francese pt-fr”. Vede di più in User apparenza di Lingue. A esempiu, sopra dimostra u so usu.

(6) Autori i Trpezarija

– fundamentali

Tù ùn pò vulete à furniscia tuttu u prughjettu di CKEditor. tandu, perchè micca ottimisazione di u Trpezarija cum'è necessaire? Un esempiu, lassannu bona scrittore BASIC.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <testa,>  
    <scrittura Type="text/javascript">
      window.onload = funziunava() {
        CKEDITOR.replace( 'editor1', {
                           Trpezarija:
                           [
                             { nomu: 'Basicstyles', voci : [ 'ITV','Italic' ] },
                             { nomu: 'Comma', voci : [ 'NumberedList','BulletedList' ] },
                             { nomu: 'Arnesi', voci : [ 'Maximize','-','About' ] }
                           ]}         
                         );
      };
    </scrittura>
  </testa,>

– piena

Sottu hè un esempiu di più cumpleta. Cacciate i buttoni chì vo ùn vulete.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <testa,>  
    <scrittura Type="text/javascript">
      window.onload = funziunava() {
        CKEDITOR.replace( 'editor1', {
                           Trpezarija: [
                             { nomu: 'Documentu', voci : [ 'Source','-','Cruciani','NewPage',"DocProps ','Preview','Print','-','Mudelli' ] },
                             { nomu: 'Cubba', voci : [ 'Tagliate','Copy','Andrée','Testu Past','PasteFromWord','-','Mori','Redo' ] },
                             { nomu: 'Riservatu', voci : [ 'Truvà','Sustituiri','-','SelectAll','-','Donu', 'Scayt' ] },
                             { nomu: 'Forma', voci : [ 'Form', 'Crisantemu', 'Radio', 'TextField', 'Textarea', 'Selezziunà', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { nomu: 'Basicstyles', voci : [ 'ITV','Italic','Sapè','Strike','Subscript','Superscript','-','RemoveFormat' ] },
                             { nomu: 'Comma', voci : [ 'NumberedList','BulletedList','-','Outdent','Nascondere','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { nomu: 'Ligami', voci : [ 'I MUVRINI','Unlink','Anchor' ] },
                             { nomu: 'Inserisci', voci : [ 'Image','Flash','Table','HorizontalRule','Porte','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { nomu: 'Stili', voci : [ 'Styles','Format','Font','FontSize' ] },
                             { nomu: 'Colori', voci : [ 'TextColor','BGColor' ] },
                             { nomu: 'Arnesi', voci : [ 'Maximize', 'ShowBlocks','-','About' ] }                            
                           ]}         
                         );
      }; 
    </scrittura>
  </testa,>

– timparati

Ghjè unu esempiu di più mudarata, cù una barra strumentu solu, ma cù u prughjettu chiavi. Nutate bè chì, cumpresu, hè pussibili à mischjà è à definisce a so altezza è maiò Scrittori.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<testa,>  
  <scrittura Type="text/javascript">
    window.onload = funziunava() {       
        CKEDITOR.replace( 'editor1', {
                           Trpezarija:
                           [
                             { nomu: 'Basicstyles', voci : [ 'ITV','Italic','Sapè' ] },
                             { nomu: 'Comma', voci : [ 'NumberedList','BulletedList' ] },
                             { nomu: 'Comma', voci : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { nomu: 'Stili', voci : [ 'Font','FontSize' ] },
                             { nomu: 'Colori', voci : [ 'TextColor','BGColor' ] },
                             { nomu: 'Cubba', voci : [ 'Tagliate','Copy','Andrée','PasteFromWord','-','Mori','Redo' ] },                             
                             { nomu: 'Arnesi', voci : [ 'Maximize','-','About' ] }
                           ],
                           larghezza: "740px",
                           autizza: "200px"}
                         );
    };
  </scrittura>
</testa,>

(7) Textarea (CKEditor) subjecting la muta a furmari

Sì u vostru Textarea / CKeditor cumpariri biancu (viotu) quandu sottumettendu la forma, vi ponu aduprà issu “artifice” I creatu sottu, chì serve primurosu di acchiappari u cuntenutu di CKEditor è ghjucà u currispunnunu Textarea. Stu hè fatta da li chiacchiari di li funzioni setCKEditorToTextarea() quandu voi di cliccà nant'à u buttone Indy (buttone love cunfirmate), onclick evenimentu micca nurmalamenti() buttone.

1
2
3
4
5
6
<scrittura Type="text/javascript">
      funziunava setCKEditorToTextarea() {
        di( instanceName in CKEDITOR.casi)
          CKEDITOR.casi[instanceName].updateElement();            
      }
</scrittura>

parolle di Documentaliste

CKEditor hè un testu à esse usatu dintra e pagine Web. Hè un scrittore WYSIWYG, ca significa ca lu testu esse stampatu da u me sarà cum'è vicinu pussibuli di u publicatu. Si parla di u web cumuna features, riservatu, trova in u appiicazioni di scrittura Desktop, colpa FRATELLO SOLE SORELLA Microsoft Word E manuscript. Na vota ca lu CKEditor hè licenziata sottu Spiritueux “Open Source” è di cumerciu, vi sò capaci à aduprà in ogni dumanda. Hè l 'edituri idiali di sviluppori, creatu à furniscia suluzioni faciuli è putente di i so utilizatori.

lucca i scrittori

surghjenti

Per Starters hè! Vede u situ di u documentaliste di più détails.

numaru tutali di successi: 64582

29 recensioni “Turn TEXTAREA pubblicatu (WYSIWYG | CKEditor)

  1. articulu assai arrizzà, la parti a ch'e vulete ultilizar si rifirisci a tema 6, cunsidirari ca li CKEditor salvate in html, u vostru cuntenutu discritta in lu textarea deve prupone u testu attraversu e-mail cu furmatu html, parò bisognu salver in BD in furmatu pdf listessu. Avete tutti suggerimenti I ponu ultilizar? :)

  2. Ronaldo dissi:

    manera, Invinuchjatu sviluppà un prugettu è na forma hà dui campi textarea.
    I Adopru CKEditor in dui.

    discugràfica – manca

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

    discugràfica – destra

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

    U scrittore hè appiicata currettamente. Ma quandu u prucessu di furmari un schedariu PHP hè si solu a prima dati campu e la secunna vi sviutà.

    Hè un prublema cù u CKEditor? perchè I ùn aduprà arrivare dati da dui campi di solitu
    .
    I usatu la struttura di pruposti da u situ CKeditor assai.

    • Salut Ronaldo, I fattu un testu quì, è ùn ci era mancu prublema. Fà u seguenti, piglià u còdice quì sottu, mette in un schedariu “teste.php” in u vostru servore, ma, isolé da a so dumanda chì hè dannu prublema. Da nutà chì da sottumettendu la forma cu dui textarea (CKEditor), i dati chì nurmalamenti esse mandati.

      u schedariu test.php (DUI TextAreas fatte)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html,>
        <testa,>
          <titulu>CKEditor</titulu>
          <meta content="text/html; charset=utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></scrittura>
          <script type="text/javascript">
            window.onload = function()  {
              CKEDITOR.replace( 'editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </scrittura>
        </testa,>
        <corpu,>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Value nizziali 1</textarea>
            <textarea id="editor2" name="editor2">valore iniziale di 2</textarea>
            <input type="submit" value="Submit" />
          </forma>  
        </corpu,>
      </html,>
      <?pHP satana 'Scrittori 1 ---> '.@$_REQUEST['editor1'].'<fr />'; ?>
      <?pHP satana 'Scrittori 2 ---> '.@$_REQUEST['Editor2'].'<fr />'; ?>
  3. Ronaldo dissi:

    I pruvatu à passà u corsu, ma mi pari ùn hè statu publicatu. Ma vi capisce ciò chì u prublemu dritta? usu CKEditor solu unu di i textarea manna dati à un altru hè viotu.

    • Ok, Penzu I capisce. Comu nna sopra à, Ùn aghju micca hannu lu stissu prubbrema. dunque, rescan u vostru còdice, vede s'è vo avete micca di più chè unu campu (entrée) cù u listessu nomu (nomu). hugs!

      • Ronaldo dissi:

        I decisu cù a so corte…. (6) Textarea (CKEditor) subjecting la muta a furmari

        Era abbastanza à mette i funzioni ci è ok & :) Stu vc e forma Q hè passatu cù PHP dritta? Ancu u pagine esse messa in opera in scrittore PHP cù ssel.
        À ringrazià di u punte

        apprufittannu di ùacchiu Q ùn hè micca u tema di l'articulu, I prugrammi di un longu tempu cun di giava è .com è PHP menu tempu and'm cugliera String cunversione datatu. Hè ùn avè una funzione direttu, comu di dati catena (strtotime) nè? I Q di u sapè assai PHP Q I. Sè tu sapè sta arrestu manda à u mio mail ronaldodantas2@gmai.com

        Nisun bisognu di publicà stu cumentu. À ringrazià di u punte.

  4. Ola Taylor assai bè u so articulu.

    Digià stallatu è Adopru bè opere. Aghju un dubbitu, per esempiu in u vostru bloggu vi trasiu lu casciuni a gialla cu script. Comu vo fìci? È una funzione di ckeditor?

    grazie

  5. Fernando dissi:

    Comu pi fari u caratteru spiciali attivati ​​i marzu(PRIMA 1) E ªè¤(seconda 2nd) SENZA US cliccate nant'à strumentu inserisci caratteru auguri? I LIKE TO DO STA TO entria micca in linea CORSA CU NO Apertu carrello.

    • manera, I tistati quì è sulu fari la manera cunvinziunali chì travaglia, in altre parolle, tèniri sutta la chiavi Alt è inconnu l 'ordine di numari in currispundenza di u simbulu Bramati. esempiu: Alt + 166 = ªè¤ E Alt + 167 = riggimentu. parlava!

  6. Ghjacumu dissi:

    bonghjornu, assai bè Guy u vostru articulu, Invinuchjatu principianu à travaglià incù ssel avà, è tocca à creà un testu, I pinsau di usu ckeditor, ma a dura pè ottene trattà lu, inconnu solu vulete voi avutu , salvà, novu, mori, canadese remake, collana, copia, è una scelta di scatula lingua, solu invece di esse una forma di u scrittu, saria linguagiu di prugrammazione, e allura avissi a maniari la dati ricevutu, tipu di comu un scrittore codice surghjente nurmali, solu nanu, se mi pò aiutà.

  7. pipe, I stallati bè, un pocu prublemu, ma ciò chì mi sentu affruntà hè chì si trasforma lu caratteri particulari in codici html, hè u tippu â Â Á è vuliu elli à esse cum'è chì a mio basa di dati, Hè cum'è?

    • Opa, chì ci pudia esse qualcosa cù u scrittore vi sò cù à scrive còdice. Prova cù un pezzu di note cumune è entre u esempiu codice piena HTML, è vede s'ellu u prublema ferma.

      Prova pulitiche insemi chi dicu, a vostra pagina chì charset crià à aduprà (ISO-8859-1 love utf-8).

      1
      2
      3
      4
      5
      
      <corpu,>
        <testa,>
            <mitacugnizioni charset="UTF-8">
        </testa,> 
      ...

      Sè vo aduprate PHP, charset crià u codice principiu, nanzu di qualcosa:

      1
      
        <?pHP lunat("Content-Type: u testu / html,;  charset = ISO-8859-1",vera) ?>

      o, pruvà à curà u cuntenutu sanu sanu di u richiesti cù u charset curretta:

      1
      
        htmlentities( utf8_decode($_POST['Variàbbili']) );

      U fattu hè chì u prublemu vi dissimu ùn parenu esse i CKEditor, à perchè I aduprà in diversi d'appricazzioni e hannu nuddu prublema cù caratteri particulari. dinù messu l 'Ichine u situ di u documentaliste, e I micca vede prublema. vede quì: http://ckeditor.com/demo

  8. Marcio dissi:

    Good dopu meziornu Invinuchjatu pudia pè ottene u testu scrittu in textArea Via ssel à mandà à a basa di dati, ma ùn aghju po, Si hà qualchi mètudu pè ottene u testu?
    grazie

  9. bonu dopu meziornu.
    I piglià nantu cù stu dispusitivu di Cialis medicale – qualcosa agl'occhi ancu sèmplice.
    – I voli à sapè cumu crià la barra Lingua (induve hè a funziunalità) esse piatte (comu 'na pocu buttone chì tenga spariscia dopu antica u testu)
    – Dinù cumu nun mi nni vaju cu lu barra fondu (chi s'affaccia “corpu,” è altri balise) ?
    – How do I fari la scatula u testu cù un “autizza” automatica: activité, se I prescribe 10 chì a scatula vi allungamentu mentri ju beaten… Sè I appena inconnu 1 scatula MP hè in u tempu di u tippu I…

    • Bonghjornu, scusa, ci era qualchi accurtatoghji (fiaschi) in u vostru còdice, tantu à toglie lu ghjustu.

      In stu riguardu vi tuccherà, hè sanu pussibili, ma I Cunziece cherche un prufessiunale chì capisce JavaScript per aiutà vi.

      I Mulateri Di L'ghjustu dì i funi:

      – Hide Toolbar (Trpezarija):

      1
      2
      3
      
       diritturi = CKEDITOR.in linea( 'editor1', {
          removePlugins: 'Trpezarija'
      } );

      – Hide Footer (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Cresce autizza automaticamente (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (dimustrazzioni)

      esempiu:

      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,>
          <titulu>CKEditor</titulu>
          <cuntenutu mitacugnizioni="text/html; charset=utf-8" situ http-equiv="content-type" />
          <scrittura SRC="http:////cdn.ckeditor.com/4.5.3/basic/ckeditor.js"></scrittura>
          <scrittura SRC="plugin.js"></scrittura>  <!-- arrivare un plugin.sarah E em situ http://ckeditor.com/addon/autogrow ->  
          <scrittura Type="text/javascript">
           window.onload = funziunava()  {
              CKEDITOR.replace( 'editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: 'Trpezarija',
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  autizza: '70px'
              });
           };
          </scrittura>
        </testa,>
        <corpu,>
          <azzione forma="request.php" mètudu="post">
            <textarea id="editor1" nomu="editor1">testu nizziali.</textarea>
            <activité entrée="submit" valore="Submit" />
          </forma>  
        </corpu,>
      </html,>
  10. odilon dissi:

    I ùn pò entre in u testu in a basa di dati currettamente, perchè tuttu hè stranu

    E ex:
    <P p>&aacute; &eacute; &iacute;ASD</P p>
    vi hè

  11. Claudio dissi:

    Salut Taylor, màschera su articulu assai bè spiegata. I vulete aduprà issu scrittore in una dumanda PHP è vulete sapè cumu crià un ciamatu (o buttone) in u Trpezarija à purtà dati BD à inserisci in u testu di? in altre parolle, clicchendu un buttone si apre un dialogue scatula cù u risultatu di una quistione à a basa di dati à sceglie una casa discugràfica.
    Pudete?

  12. Glaydison Silva dissi:

    Bonghjornu, granni articulu. Pussutu I distinu un novu articulu? I bisognu di aiutu à azzione un buttone à Caricà imagine, Ichine uguali à induve si pò cullà à u servore e tali. I Ùn pò à tutti.

  13. Rômulo dissi:

    Esse post me ajudou muito mas queria saber se tem como tirar o parágrafo que ele cria automaticamente quando o campo é preenchido.

    à.
    Rômulo

Lascià una circulacion

U vostru indirizzu email ùn sarà publicatu. campi, nicissarii sò marcati cù *