Nguripake TEXTAREA publisher (WYSIWYG | CKEditor)

Punika bantuan cepet sampeyan nggabungake CKEditor karo aplikasi Web ing mung telung langkah.

presentation

nguripake tags TEXTAREA ing editor Web ora ono tugas rumit. Ing antawisipun kathah editors sing bisa nemokake ing Internet, supaya weruh utawa apa nggunakake CKEditor. Deleng editor ing tumindak DEMO.

instalasi

Download CKEditor ing http://ckeditor.com/download. Ing versi digunakake ing kirim iki 3.6.4, saka 17 Jul 2012. Extract berkas ckeditor_3.6.4.zip karo aplikasi. folder ckeditor bakal digawe. rauh, Saiki mung nelpon ing kode sumber!

integrasi

CKEditor punika aplikasi JavaScript. Kanggo maca, mung nelpon prasaja kanggo wong ing tags Lowongan kode sumber. rampung iki, API CKEditor JavaScript wis siyap dienggo. Elinga nyetel path file ckeditor.js kanggo direktori ngendi sampeyan unzipped.

langkah 1 – Nggawe telpon kanggo CKEditor
1
2
3
  <sirah>
    <jinis aksara="text/javascript" src="ckeditor/ckeditor.js"></script>
  </sirah>
langkah 2 – Nggawe lapangan textarea
1
2
3
  <awak>
    <textarea id="editor1" jeneng="editor1">&lt;p&gt;Nilai dhisikan.&lt;/p&gt;</textarea>
  </awak>
langkah 3 – Ngomong apa TEXTAREA (id) Bakal diganti dening CKEditor
1
2
3
4
5
6
7
  <sirah>
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi()  {
        CKEDITOR.ngganti( 'Editor1' );
      };
    </script>    
  </sirah>

rauh, karya maneh! ora pracaya? Hello, ana menehi “F5” ing browser lan ndeleng dhewe… kode lengkap katon kaya iki:

kode lengkap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
  <sirah>
    <title>CKEditor</title>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi()  {
        CKEDITOR.ngganti( 'Editor1' );
     };
    </script>
  </sirah>
  <awak>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&lt;p&gt;Nilai dhisikan.&lt;/p&gt;</textarea>
      <input type="submit" value="Submit" />
    </wangun>  
  </awak>
</html>

langit, saiki sampeyan kudu nggawe pangaturan minangka aplikasi, kanggo miwiti nyetel tumindak Wujud Panjenengan, nuduhake kaca sing bakal nompo lan proses data diajukake liwat POST.

Artikel ends kene, nanging aku bakal ninggalake sawetara mutiara liyane kanggo curious:

tips

(1) Sem evento onload, kelas com =”ckeditor”

Yen sampeyan nemtokake kelas “ckeditor” kanggo textarea Panjenengan, kanthi otomatis bakal wis diowahi dadi CKEditor a, tanpa gadhah kanggo nggunakake script disebut dening acara “onload”, lan prasaja:

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
  <sirah>
    <title>CKEditor</title>
    <isi meta="text/html; charset = utf-8" http-equiv="content-type" />
    <jinis aksara="text/javascript" src="ckeditor/ckeditor.js"></script>
  </sirah>
  <awak>
    <tumindak wangun="request.php" cara="post">
      <textarea kelas="ckeditor" id="editor1" jeneng="editor1">&lt;p&gt;Nilai dhisikan.&lt;/p&gt;</textarea>
      <jinis input="submit" Nilai="Submit" />
    </wangun>  
  </awak>
</html>

(2) line Exchange break <p> dening <br />

Aku ngeweruhi rong cara kanggo ngganti dening P BR nalika teclamos ENTER. pisanan, Iku kanggo nyetel parameter sing enterMode Nilai 2, wiwit 1 = P, 2 = BR lan 3 = div.

1
2
3
4
5
6
7
  <sirah>  
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi() {
        CKEDITOR.ngganti( 'Editor1', {enterMode: Panggil(2)} );
      };
    </script>
  </sirah>

utawa, mbukak berkas config.js lan netepake kaya:

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

ing kasus iki, kanggo ngetik ENTER, We kudu opsi:
CKEDITOR.ENTER_P - anyar paragraf P digawe;
CKEDITOR.ENTER_BR - line break karo BR;
CKEDITOR.ENTER_DIV - pemblokiran anyar digawe karo Div.

Aku menehi saran cedhak lan mbukak browser kanggo ndeleng asil

owah-owahan iki, amarga sampeyan bisa njaluk cached! Yèn isih tetep ora bisa, mbusak cache browser.

(3) Ngganti latar kang toolbar CKEditor

Sing ngeweruhi, Kita bisa owah-owahan ing paramèter CKEditor tanggung jawab kita langsung kanggo obyek ckeditor utawa liwat file config.js. mulane, Aku bakal nduduhake mung salah siji saka cara:

1
2
3
4
5
6
7
  <sirah>  
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi() {
        CKEDITOR.ngganti( 'Editor1', {Nordwestlicher: '# Ff0000'} );
      };
    </script>
  </sirah>

(4) Nggabungke paramèter konfigurasi CKEditor

Paramèter konfigurasi CKEditor bisa dikombinasikaké. Ngerti kemungkinan, njupuk dipikir ing API config. contone:

1
2
3
4
5
6
7
8
9
10
11
12
  <sirah>  
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi() {
        CKEDITOR.ngganti( 'Editor1', {  Nordwestlicher: 'CCC',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'Ckeditor / outroConfig.js',
                                        basa: 'Pt-br'        
                                      } 
                        );
      };
    </script>
  </sirah>

(5) Basa didhukung dening CKEditor

O CKEditor suporta 58 basa, klebu utawa “pt-br”. Waca liyane ing User Interface Basa. Conto ing ndhuwur nduduhake sawijining nggunakake.

(6) Ngganti toolbar

– dhasar

Sampeyan bisa uga ora pengin kanggo nyedhiyani kabeh fitur saka CKEditor. banjur, kok ora ngoptimalake toolbar minangka needed? Conto ninggalake editor BASIC apik.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <sirah>  
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi() {
        CKEDITOR.ngganti( 'Editor1', {
                           toolbar:
                           [
                             { jeneng: 'Basicstyles', item : [ 'Bold','Italic' ] },
                             { jeneng: 'Paragraf', item : [ 'NumberedList','BulletedList' ] },
                             { jeneng: 'Pribadi', item : [ 'Nggedhekake','-','About' ] }
                           ]}         
                         );
      };
    </script>
  </sirah>

– lengkap

Ngisor iki conto liyane lengkap. Copot tombol sing ora pengin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <sirah>  
    <jinis aksara="text/javascript">
      jendelo.onload = fungsi() {
        CKEDITOR.ngganti( 'Editor1', {
                           toolbar: [
                             { jeneng: 'Document', item : [ 'Sumber','-','Simpen','NEWPAGE',"DocProps ','Pratayang','Print','-','Cithakan' ] },
                             { jeneng: 'Clipboard', item : [ 'Cut','Tuladen','Tempel','Tèks Past','PasteFromWord','-','Batalaken','Mbaleni' ] },
                             { jeneng: 'Editing', item : [ 'Golek','Ganti','-','Pilih Kabeh','-','SpellChecker', 'Scayt' ] },
                             { jeneng: 'Formulir', item : [ 'Formulir', 'Kothak', 'Radio', 'TextField', 'Textarea', 'Pilih', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { jeneng: 'Basicstyles', item : [ 'Bold','Italic','Garis ngisor','Strike','Subscript','Superscript','-','RemoveFormat' ] },
                             { jeneng: 'Paragraf', item : [ 'NumberedList','BulletedList','-','Outdent','Indent','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { jeneng: 'Pranala', item : [ 'Link','Pedhot','Anchor' ] },
                             { jeneng: 'Masang', item : [ 'Image','Flash','Tabel','HorizontalRule','Smiley','SpecialChar','PageBreak','Rongko' ] },
                             '/',
                             { jeneng: 'Gaya', item : [ 'Gaya','Format','Font','FontSize' ] },
                             { jeneng: 'Werna', item : [ 'TextColor','BGColor' ] },
                             { jeneng: 'Pribadi', item : [ 'Nggedhekake', 'ShowBlocks','-','About' ] }                            
                           ]}         
                         );
      }; 
    </script>
  </sirah>

– Moderate

Iki salah siji conto liyane Moderate, karo garis alat mung, nanging karo fitur tombol. Elinga yen, klebu, iku bisa kanggo gabungke lan kanggo nemtokake dhuwur lan amba Editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<sirah>  
  <jinis aksara="text/javascript">
    jendelo.onload = fungsi() {       
        CKEDITOR.ngganti( 'Editor1', {
                           toolbar:
                           [
                             { jeneng: 'Basicstyles', item : [ 'Bold','Italic','Garis ngisor' ] },
                             { jeneng: 'Paragraf', item : [ 'NumberedList','BulletedList' ] },
                             { jeneng: 'Paragraf', item : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { jeneng: 'Gaya', item : [ 'Font','FontSize' ] },
                             { jeneng: 'Werna', item : [ 'TextColor','BGColor' ] },
                             { jeneng: 'Clipboard', item : [ 'Cut','Tuladen','Tempel','PasteFromWord','-','Batalaken','Mbaleni' ] },                             
                             { jeneng: 'Pribadi', item : [ 'Nggedhekake','-','About' ] }
                           ],
                           jembaré: "740px",
                           dhuwur: "200px"}
                         );
    };
  </script>
</sirah>

(7) Textarea (CKEditor) subjecting kothong kanggo mbentuk

Yen Textarea Panjenengan / CKeditor katon putih (P) nalika ngajokake formulir, sampeyan bisa nggunakake “artifice” Aku nggawe ngisor, kang bener serves kanggo nyekel isi CKEditor lan muter cocog Textarea. Iki wis rampung dening nelpon fungsi setCKEditorToTextarea() nalika klik tombol send (ngirim tombol utawa), onclick acara ora biasane() tombol.

1
2
3
4
5
6
<jinis aksara="text/javascript">
      fungsi setCKEditorToTextarea() {
        kanggo(ana instanceName ing CKEDITOR.kedadean)
          CKEDITOR.kedadean[instanceName].updateElement();            
      }
</script>

tembung pangembang

CKEditor punika editor teks kanggo digunakake nang kaca web. Iku editor WYSIWYG, kang tegese teks kang diowahi dening pangguna bakal sabisane menyang diterbitake. Dee fitur editing web umum, ditemokaké ing aplikasi editing desktop, Karakter o Microsoft Word e OpenOffice. Sawise CKEditor ing dilisensi lisensi “Open Source” lan komersial, sampeyan bisa nggunakake ing aplikasi sembarang. Iki editor becik kanggo gawe, digawe kanggo nyedhiyani solusi gampang lan kuat kanggo pangguna sing.

iklan

sumber

Kanggo wiwitan iku! Waca situs pangembang kanggo rincian liyane.

Total accesses: 59303

27 reviews “Nguripake TEXTAREA publisher (WYSIWYG | CKEditor)

  1. tulisan kelangan, sisih kanggo kang pengin ultilizar nuduhake topik 6, ngelingi sing CKEditor disimpen ing html isi diterangake ing textarea kudu ngirim teks ing liwat e-mail karo format html Nanging kudu salver ing BD ing format txt padha. Sampeyan duwe prayogi aku bisa ultilizar? :)

  2. Ronaldo ngandika:

    cara, Aku ngembangaken project a lan wangun wis rong kothak textarea.
    Aku nggunakake CKEditor ing loro.

    rekaman – kiwa

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

    rekaman – tengen

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

    editor wis Applied bener. Nanging nalika proses mbentuk file php iku mung nemu data lapangan pisanan lan kaloro bakal P.

    Iku masalah karo CKEditor ing? amarga aku ora digunakake njaluk data saka rong kothak biasane
    .
    Aku digunakake ing struktur disaranake dening banget situs CKeditor.

    • ola Ronaldo, Aku test ana kene ora ana masalah. Apa ing ngisor iki, njupuk kode ngisor, sijine ing file “teste.php” ing server, nanging diisolasi saka aplikasi kang wis menehi masalah. Elinga kanthi ngajokake formulir karo loro textarea (CKEditor), data bakal biasane bakal dikirim.

      file test.php (TWO TextAreas SIMULTANEOUS)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <html>
        <sirah>
          <title>CKEditor</title>
          <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 = fungsi()  {
              CKEDITOR.replace( 'Editor1' );
              CKEDITOR.replace( 'Editor2' );
           };
          </script>
        </sirah>
        <awak>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Value dhisikan 1</textarea>
            <textarea id="editor2" name="editor2">Nilai dhisikan saka 2</textarea>
            <input type="submit" value="Submit" />
          </wangun>  
        </awak>
      </html>
      <?php kumandhang 'Editor 1 ---> '.@$_REQUEST['Editor1'].'<br />'; ?>
      <?php kumandhang 'Editor 2 ---> '.@$_REQUEST['Editor2'].'<br />'; ?>
  3. Ronaldo ngandika:

    Aku nyoba kanggo pass kode nanging aku durung diterbitake. Nanging sampeyan ngerti apa masalah tengen? nggunakake CKEditor mung siji textarea dikirim data liyane kosong.

    • ok, Aku ngerti. Minangka tampak, Aku ora duwe masalah padha. mulane, rescan kode, weruh yen sampeyan duwe ora luwih saka siji lapangan (input) kanthi jeneng sing padha (jeneng). isin!

      • Ronaldo ngandika:

        Aku mutusaké karo tip dhewe…. (6) Textarea (CKEditor) subjecting kothong kanggo mbentuk

        Iku cukup kanggo sijine fungsi ana lan ok :) vc wangun q iki liwati nggunakake php tengen? Malah kaca kang tugasaken ing editor php nggunakake javascript.
        Thanks kanggo tips

        njupuk kauntungan saka q ngerti ora topik kirim, Aku rencana dangu karo java lan situs lan php kurang wektu and'm njupuk tanggal senar konversi. Iku ora duwe fungsi langsung, kanggo data senar (strtotime) ora? Aku q ra ngerti akeh php q aku. Yen sampeyan ngerti penahanan iki dikirim menyang email ronaldodantas2@gmai.com

        Ora perlu kanggo nerbitaké komentar. Thanks kanggo tips.

  4. Fernando ngandika:

    Carane nggawe karakter khusus ngaktifake th(FIRST 1) e ª(2 liyane) TANPA US Klik ON TOOL Pasang karakter khusus? Aku seneng kanggo DO THIS TO ENTER THE dhewe KEYBOARD WITH NO WINDOW OPEN.

    • cara, Aku dites kene lan mung apa cara conventional sing dianggo, ing tembung liyane, terus tombol ALT lan ngetik urutan nomer cocog kanggo simbol dikarepake. contone: ALT + 166 = ª e ALT + 167 = º. ngandika!

  5. James ngandika:

    sugeng enjang, wong apik banget kirim, Aku miwiti kanggo bisa karo javascript saiki, lan kudu nggawe editor teks, Aku panginten nggunakake ckeditor, nanging kanggo hard kanggo njaluk nangani iku, ngetik mung pengin sampeyan wis , nyimpen, anyar, batalaken, remake, kalung, salinan, lan pilihan saka kothak basa, mung tinimbang kang wangun nulis, bakal basa program, lan banjur kudu nangani data ditampa, jenis kaya editor kode sumber normal, mung online, yen sampeyan bisa bantuan kula.

    • Opa, sing ana uga soko karo editor sampeyan nggunakake kanggo nulis kode. Dicoba pemblokiran cathetan umum lan ketik kode HTML lengkap tuladha, lan weruh yen masalah tetep.

      Coba uga nyetel kawicaksanan sing ngomong kaca kang charset disetel kanggo nggunakake (ISO-8859-1 utawa UTF-8).

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

      Yen sampeyan nggunakake PHP, charset nyetel kode awal, sadurunge apa:

      1
      
        <?php header("Content-Type: teks / html;  charset = ISO-8859-1",bener) ?>

      utawa, nyoba kanggo nambani isi saka panjalukan nggunakake charset bener:

      1
      
        htmlentities( utf8_decode($_POST['Global']) );

      Kasunyatan iku masalah sing kasebut ora koyone dadi CKEditor, kanggo apa aku nggunakake ing macem-macem aplikasi lan ora masalah karo karakter khusus. uga dites DEMO ing pangembang web, lan aku ora weruh masalah. ndeleng kene: http://ckeditor.com/demo

  6. Marcio ngandika:

    afternoon apik aku nyoba ing teks tinulis ing textArea liwat javascript kanggo ngirim database nanging aku ora bisa, Wis sawetara cara kanggo njaluk teks?
    matur nuwun

  7. afternoon apik.
    Aku rencana nggunakake piranti iki kanggo resep medical – soko sooo malah prasaja.
    – Aku wanted kanggo ngerti carane nyetel garis luwih (ngendi iku fungsi) didhelikake (kaya tombol sethitik sing ndadekake ilang sawise nyunting teks ing)
    – Uga carane aku lunga karo garis ngisor (kang katon “awak” lan tags liyane) ?
    – Pripun nggawe kothak teks karo “dhuwur” otomatis: jinis, yen aku prescribe 10 Pangobatan kothak bakal ndawakake nalika aku ngetik… Yen aku mung ngetik 1 kothak pengobatan ing wektu jinis aku…

    • Hello, nuwun, ana sawetara ngethok (gagal) ing kode, supaya njabut mung.

      Ing gati sampeyan kudu, iku tanggung bisa, nanging aku suggest looking for a profesional sing mangertèni JavaScript kanggo mbantu.

      Aku mung ngomong tali:

      – Singidaken Toolbar (toolbar):

      1
      2
      3
      
      ana editor = CKEDITOR.apik( 'Editor1', {
          removePlugins: 'Toolbar'
      } );

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

      – Tambah dhuwur otomatis (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demo)

      contone:

      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>
        <sirah>
          <title>CKEditor</title>
          <isi 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>  <!-- njaluk plugin.JS em http://ckeditor.com/addon/autogrow ->  
          <jinis aksara="text/javascript">
           jendelo.onload = fungsi()  {
              CKEDITOR.ngganti( 'Editor1', {             
                  removePlugins: 'Elementspath', 
                  removePlugins: 'Toolbar',
                  extraPlugins: 'Autogrow',
                  autoGrow_minHeight: 70,
                  dhuwur: '70px'
              });
           };
          </script>
        </sirah>
        <awak>
          <tumindak wangun="request.php" cara="post">
            <textarea id="editor1" jeneng="editor1">teks dhisikan.</textarea>
            <jinis input="submit" Nilai="Submit" />
          </wangun>  
        </awak>
      </html>
  8. Claudio ngandika:

    hello Taylor, Sugeng ing tulisan uga diterangno. Aku pengin nggunakake editor iki ing aplikasi PHP lan pengin ngerti carane nggawe kumpulan sing (utawa tombol) ing toolbar kanggo ngowahi data BD masang ing teks? ing tembung liyane, kanthi ngeklik tombol bakal mbukak kothak dialog karo asil pitakonan ing database kanggo milih rekaman.
    sampeyan bisa?

  9. Glaydison Silva ngandika:

    Hello, kirim gedhe. Apa aku suggest post anyar? Aku kudu bantuan kanggo ngleksanakake tombol kanggo ngunggah gambar, DEMO witjaksono kanggo ngendi sampeyan bisa mbukak nganti ing server lan kuwi. Aku ora bisa ing kabeh.

Ninggalake a Reply

Panjenengan alamat email ora bisa diterbitake. Perangkat kothak ditandhani karo *