Mengubah TEXTAREA di editor (WYSIWYG | Ckeditor)

Inilah bantuan cepat bagi Anda untuk mengintegrasikan CKEditor dengan aplikasi Web Anda hanya dalam tiga langkah.

Presentasi

Mengubah Anda Tag TEXTAREA di Web editor tidak lagi adalah tugas yang rumit. Di antara banyak editor yang dapat Anda temukan di Internet, Kita melihat penggunaan CKEditor. Lihat editor dalam tindakan ini DEMO.

Instalasi

Download CKEditor di http://ckeditor.com/download. Versi yang digunakan di posting ini 3.6.4, dari 17 Juli 2012. Ekstrak file ckeditor_3.6.4.zip bersama dengan aplikasi Anda. Folder ckeditor akan dibuat. Siap, Sekarang hanya melakukan panggilan dalam kode sumber Anda!

Integrasi

CKEditor adalah aplikasi JavaScript. Untuk membacanya, hanya membuat panggilan sederhana kepadanya dalam Tag KEPALA kode sumber Anda. Melakukan ini, Javascript API dari CKEditor sudah akan siap untuk digunakan. Ingat untuk menyesuaikan file path ckeditor.js ke direktori di mana Anda membuka ritsleting.

Langkah 1 – Membuat panggilan ke CKEditor
1
2
3
  <kepala>
    <jenis script="text/javascript" src="ckeditor/ckeditor.js"></script>
  </kepala>
Langkah 2 – Menciptakan sebuah lapangan TEXTAREA
1
2
3
  <tubuh>
    <TextArea id="editor1" Nama="editor1">&Lt;p&GT;Nilai awal.&Lt;/p&GT;</TextArea>
  </tubuh>
Langkah 3 – Negara TEXTAREA (ID) akan diganti dengan CKEditor
1
2
3
4
5
6
7
  <kepala>
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi()  {
        CKEDITOR.menggantikan( 'editor1' );
      };
    </script>    
  </kepala>

Siap, sudah bekerja! Tidak percaya? Simpan, apa pun “F5” di browser dan lihat sendiri… Kode lengkap terlihat seperti ini:

Kode lengkap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <kepala>
    <judul>Ckeditor</judul>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></script>
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi()  {
        CKEDITOR.menggantikan( 'editor1' );
     };
    </script>
  </kepala>
  <tubuh>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;Nilai awal.&Lt;/p&GT;</TextArea>
      <input type="submit" value="Submit" />
    </bentuk>  
  </tubuh>
</HTML>

Tentu saja, Sekarang Anda perlu membuat penyesuaian sebagai aplikasi Anda, mulai dengan pengaturan Aksi bentuk Anda, menunjukkan halaman akan mengambil dan proses data dikirim via pos.

Artikel berakhir di sini, tapi aku akan meninggalkan beberapa lebih mutiara untuk penasaran:

Tips

(1) Ada onload event, dengan kelas =”ckeditor”

Jika Anda menetapkan kelas “ckeditor” untuk TEXTAREA Anda, Itu akan secara otomatis dikonversi ke CKEditor, tanpa perlu menggunakan script dipanggil oleh event “OnLoad”, baik sederhana:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <kepala>
    <judul>Ckeditor</judul>
    <Meta konten="text/html; charset = utf-8" http-equiv="content-type" />
    <jenis script="text/javascript" src="ckeditor/ckeditor.js"></script>
  </kepala>
  <tubuh>
    <bentuk tindakan="request.php" metode="post">
      <TextArea kelas="ckeditor" ID="editor1" Nama="editor1">&Lt;p&GT;Nilai awal.&Lt;/p&GT;</TextArea>
      <jenis input="submit" nilai="Submit" />
    </bentuk>  
  </tubuh>
</HTML>

(2) Ubah baris <p> oleh <Br />

Aku melihat dua cara bertukar P BR ketika teclamos masuk. Yang pertama, tetapkan parameter enterMode dengan nilai 2, Sejak 1 = P, 2 = BR dan 3 = DIV.

1
2
3
4
5
6
7
  <kepala>  
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi() {
        CKEDITOR.menggantikan( 'editor1', {enterMode: Nomor(2)} );
      };
    </script>
  </kepala>

Atau lebih, Buka file config.js dan menetapkan sesuatu seperti:

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

Dalam hal ini, Ketika Anda ketik ENTER, Kami memiliki pilihan:
CKEDITOR. ENTER_P-ayat baru P dibuat;
CKEDITOR. ENTER_BR-baris dengan BR;
CKEDITOR. ENTER_DIV-baru blok dengan DIV dibuat.

Merekomendasikan menutup dan membuka browser untuk melihat hasil

Perubahan ini, karena ini dapat di-cache! Jika masih tidak bekerja, membersihkan cache browser Anda.

(3) Mengubah warna latar belakang toolbar CKEditor

Seperti Anda menyadari, Kita dapat membuat perubahan di CKEditor kami menetapkan parameter langsung ke CKEDITOR atau melalui file config.js. Jadi, Saya akan menunjukkan salah satu:

1
2
3
4
5
6
7
  <kepala>  
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi() {
        CKEDITOR.menggantikan( 'editor1', {uicolor: '#ff0000'} );
      };
    </script>
  </kepala>

(4) Menggabungkan parameter konfigurasi CKEditor

Parameter konfigurasi CKEditor dapat dikombinasikan. Untuk memenuhi kemungkinan, Lihatlah Config API. Contoh:

1
2
3
4
5
6
7
8
9
10
11
12
  <kepala>  
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi() {
        CKEDITOR.menggantikan( 'editor1', {  uicolor: '#ccc',
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : 'ckeditor/outroConfig.js',
                                        bahasa: 'en'        
                                      } 
                        );
      };
    </script>
  </kepala>

(5) Bahasa yang didukung di CKEditor

Mendukung CKEditor 58 bahasa, termasuk “en”. Lihat lebih lanjut di Pengguna antarmuka bahasa. Contoh di atas menunjukkan penggunaan.

(6) Menyesuaikan toolbar

– Dasar-dasar

Anda mungkin tidak ingin memberikan semua fitur dari CKEditor. Jadi, Mengapa tidak mengoptimalkan toolbar sesuai dengan kebutuhan Anda? Berikut adalah contoh meninggalkan editor sangat dasar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <kepala>  
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi() {
        CKEDITOR.menggantikan( 'editor1', {
                           Toolbar:
                           [
                             { Nama: 'basicstyles', item : [ 'Tebal','Miring' ] },
                             { Nama: 'paragraf', item : [ 'NumberedList','BulletedList' ] },
                             { Nama: 'alat', item : [ 'Memaksimalkan','-','Tentang' ] }
                           ]}         
                         );
      };
    </script>
  </kepala>

– Menyelesaikan

Berikut ini adalah contoh lengkap. Menghapus tombol yang tidak ingin.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <kepala>  
    <jenis script="text/javascript">
      jendela.OnLoad = fungsi() {
        CKEDITOR.menggantikan( 'editor1', {
                           Toolbar: [
                             { Nama: 'dokumen', item : [ 'Sumber','-','Save','NewPage','DocProps','Preview','Cetak','-','Template' ] },
                             { Nama: 'clipboard', item : [ 'Memotong','Copy','Paste','PasteText','PasteFromWord','-','Membatalkan','Mengulang' ] },
                             { Nama: 'mengedit', item : [ 'Menemukan','Ganti','-','SelectAll','-','SpellChecker', 'Scayt' ] },
                             { Nama: 'bentuk', item : [ 'Bentuk', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Pilih', 'Button', 'ImageButton', 'HiddenField' ] },
                             '/',
                             { Nama: 'basicstyles', item : [ 'Tebal','Miring','Menggarisbawahi','Menyerang','Subskrip','Superscript','-','RemoveFormat' ] },
                             { Nama: 'paragraf', item : [ 'NumberedList','BulletedList','-','Outdent','Indentasi','-','Blockquote','CreateDiv', '-','JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl' ] },
                             { Nama: 'link', item : [ 'Link','Unlink','Jangkar' ] },
                             { Nama: 'insert', item : [ 'Gambar','Flash','Tabel','HorizontalRule','Smiley','SpecialChar','PageBreak','Iframe' ] },
                             '/',
                             { Nama: 'gaya', item : [ 'Gaya','Format','Font','Ukuran tulisan' ] },
                             { Nama: 'warna', item : [ 'TextColor','BGColor' ] },
                             { Nama: 'alat', item : [ 'Memaksimalkan', 'ShowBlocks','-','Tentang' ] }                            
                           ]}         
                         );
      }; 
    </script>
  </kepala>

– Dikelola

Ini adalah contoh yang lebih moderat, dengan alat bar hanya, tapi dengan fitur-fitur utama. Perhatikan bahwa, termasuk, Hal ini dimungkinkan untuk menggabungkan dan menentukan tinggi dan lebar editor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<kepala>  
  <jenis script="text/javascript">
    jendela.OnLoad = fungsi() {       
        CKEDITOR.menggantikan( 'editor1', {
                           Toolbar:
                           [
                             { Nama: 'basicstyles', item : [ 'Tebal','Miring','Menggarisbawahi' ] },
                             { Nama: 'paragraf', item : [ 'NumberedList','BulletedList' ] },
                             { Nama: 'paragraf', item : [ 'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'] },
                             { Nama: 'gaya', item : [ 'Font','Ukuran tulisan' ] },
                             { Nama: 'warna', item : [ 'TextColor','BGColor' ] },
                             { Nama: 'clipboard', item : [ 'Memotong','Copy','Paste','PasteFromWord','-','Membatalkan','Mengulang' ] },                             
                             { Nama: 'alat', item : [ 'Memaksimalkan','-','Tentang' ] }
                           ],
                           lebar: "740px",
                           tinggi: "200px"}
                         );
    };
  </script>
</kepala>

(7) TextArea (Ckeditor) kosong ketika menyerahkan formulir

Jika Anda Textarea/CKeditor muncul kosong (kosong) Ketika mengirimkan formulir, Anda dapat menggunakan ini “Kembang api” Saya dibuat di bawah, yang benar-benar berfungsi untuk mendapatkan isi dari CKEditor dan bermain dalam Textarea sesuai. Hal ini dilakukan dengan memanggil fungsi setCKEditorToTextarea() Ketika Anda mengklik tombol untuk mengirim (Kirim atau tombol), biasanya di pada onclick event() tombol.

1
2
3
4
5
6
<jenis script="text/javascript">
      fungsi setCKEditorToTextarea() {
        adalah(var InstanceName dalam CKEDITOR.contoh)
          CKEDITOR.contoh[InstanceName].updateElement();            
      }
</script>

Kata-kata dari pengembang

Ckeditor adalah editor teks untuk digunakan dalam halaman web. Ini adalah WYSIWYG editor, yang berarti bahwa teks sedang diedit oleh pengguna akan sedekat mungkin dengan diterbitkan. Dia membawa ke fitur pengeditan umum web, ditemukan di desktop mengedit aplikasi, seperti Microsoft Word dan OpenOffice. Setelah CKEditor ini berlisensi di bawah lisensi “Open Source” dan hal-hal komersial, Anda akan dapat menggunakannya di setiap jenis aplikasi. Ini adalah editor yang ideal untuk pengembang, dirancang untuk memberikan solusi mudah dan kuat kepada pengguna.

Editor lain

Font

Di tempat pertama adalah bahwa! Lihat pengembang website untuk rincian lebih lanjut.

Jumlah total hits: 58776

27 Komentar pada “Mengubah TEXTAREA di editor (WYSIWYG | Ckeditor)

  1. Posting yang sangat dingin, Bagian yang ingin saya gunakan berkaitan dengan topik 6, mengingat bahwa CKEditor menyimpan dalam html Anda konten dijelaskan dalam textarea perlu mengirimkan teks melalui email dengan html format tetapi perlu menyimpan dalam BD dalam txt format sama. Apakah Anda memiliki saran yang dapat saya gunakan? :)

  2. Ronaldo mengatakan:

    Pria, Saya mengembangkan sebuah proyek dan bentuk memiliki dua bidang textarea.
    Saya menggunakan CKEditor di kedua.

    Jam kerja – Kiri

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

    Jam kerja – Kanan

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

    Editor diterapkan dengan benar. Tetapi ketika bentuk proses php file hanya menerima data dari field pertama dan kedua akan membatalkan.

    Ini adalah masalah dengan CKEditor? karena jika Anda tidak menggunakannya aku mendapatkan data dari dua bidang biasanya
    .
    Saya menggunakan struktur disarankan oleh situs itu sendiri CKeditor.

    • Halo Ronaldo, Saya melakukan tes di sini dan tidak ada masalah. Lakukan hal berikut, Ambil kode berikut, dimasukkan ke dalam sebuah file “Teste.php” dalam server Anda, Tapi terisolasi dari aplikasi Anda yang memberikan masalah. Perhatikan bahwa ketika mengirimkan formulir dengan dua textarea (Ckeditor), data akan dikirim biasanya.

      Teste.php file (DUA TEXTAREAS SIMULTAN)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <kepala>
          <judul>Ckeditor</judul>
          <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. ganti( 'editor1' );
              CKEDITOR. ganti( 'editor2' );
           };
          </script>
        </kepala>
        <tubuh>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Nilai awal 1</TextArea>
            <textarea id="editor2" name="editor2">Nilai awal 2</TextArea>
            <input type="submit" value="Submit" />
          </bentuk>  
        </tubuh>
      </HTML>
      <?PHP echo ' Editor 1 ---> '.@$_ PERMINTAAN['editor1'].'<Br />'; ?>
      <?PHP echo ' Editor 2 ---> '.@$_ PERMINTAAN['editor2'].'<Br />'; ?>
  3. Ronaldo mengatakan:

    Saya mencoba untuk melewati kode tapi aku tidak berpikir itu diterbitkan. Tapi kau tahu apa salah dengan tepat? CKEditor menggunakan hanya salah satu textarea mengirimkan data lain kosong.

    • Oke, Saya pikir saya mengerti. Seperti ditunjukkan di atas, Aku tidak punya masalah yang sama. Jadi, reanalise kode Anda, Jika Anda tidak memiliki lebih dari satu bidang (masukan) dengan nama yang sama (Nama). Pelukan!

      • Ronaldo mengatakan:

        Saya memutuskan untuk dengan ujung Anda sendiri…. (6) TextArea (Ckeditor) kosong ketika menyerahkan formulir

        Bastou colocar função lá e ok :) ESSA forma q vc passou é usando php raja? Bahkan halaman yang di php saya ditugaskan editor menggunakan javascript.
        Terima kasih untuk tips

        memanfaatkan meskipun q tidak subjek posting, Program waktu yang lama dengan .net, java dan php untuk sedikit waktu dan saya memilih dengan tanggal konversi ke string. Tidak memiliki fungsi langsung, Bagaimana string untuk tanggal (strtotime) Kanan? Pikir Anda tahu php q lebih baik saya. Jika Anda tahu hal ini mengirim ke email saya ronaldodantas2@gmai.com

        Tidak perlu menerbitkan komentar ini. Terima kasih untuk tips.

  4. Halo Taylor sangat baik posting Anda.

    Telah terinstal dan saya menggunakan karya-karya baik. Saya memiliki keraguan, misalnya di blog Anda yang Anda masukkan dalam kotak kuning dengan script. Bagaimana Anda melakukannya? Dan fitur di ckeditor?

    Terima kasih

  5. Fernando mengatakan:

    Bagaimana cara mengaktifkan karakter khusus th(1 PERTAMA) dan th(KEDUA 2) KECUALI SAYA KLIK MEMASUKKAN KARAKTER KHUSUS ALAT? SAYA INGIN MELAKUKAN HAL INI KETIKA MENGETIK PADA KEYBOARD ITU SENDIRI TANPA MEMBUKA JENDELA APAPUN.

    • Pria, diuji di sini dan hanya melakukan bentuk konvensional yang bekerja, IE, terus tombol ALT dan ketik urutan angka yang sesuai dengan simbol yang diinginkan. Contoh: ALT + 166 = Rd dan ALT + 167 = °. Mengatakan!

  6. James mengatakan:

    Selamat pagi, Sangat baik posting Anda, Aku mulai bekerja dengan javascript sekarang, dan saya harus membuat sebuah teks editor, Saya pikir saya akan menggunakan ckeditor, tetapi dengan kesulitan untuk dapat memanipulasi itu, Aku hanya berharap Anda akan ketik , Simpan, Baru, Membatalkan, Mengulang, Pasta, salinan, dan pilihan bahasa, hanya daripada bentuk tulisan, Itu akan menjadi bahasa pemrograman, dan kemudian harus menangani data yang diterima, jenis seperti editor kode sumber yang normal, hanya online, Jika Anda dapat membantu saya.

  7. Buddy, Saya telah menginstal baik, tapi sedikit masalah yang saya menghadapi bahwa mengubah karakter khusus dalam kode html seperti â â dan aku ingin mereka menjadi pula untuk database saya, sebagai?

    • UPS, yang mungkin ada sesuatu dengan editor yang Anda gunakan untuk menulis kode. Mencoba menggunakan Notepad dan masukkan contoh kode HTML lengkap, dan melihat jika masalah tetap.

      Coba juga menetapkan kebijakan yang mengatakan ke halaman Anda yang menetapkan charset menggunakan (ISO-8859-1 atau UTF-8).

      1
      2
      3
      4
      5
      
      <tubuh>
        <kepala>
            <META charset="UTF-8">
        </kepala> 
      ...

      Jika Anda menggunakan PHP, mengatur charset di awal kode, Sebelum sesuatu:

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

      Ou ainda, tente tratar o conteúdo das requisições usando o charset correto:

      1
      
        htmlentities( utf8_decode($_ POSTING['variable']) );

      Faktanya adalah bahwa masalah Anda tidak tampak seperti CKEditor, Mengapa saya menggunakannya dalam berbagai aplikasi dan saya tidak punya masalah dengan karakter khusus. Juga diuji DEMO situs web pengembang, dan aku melihat ada masalah. Melihat di sana: http://ckeditor.com/demo

  8. Marcio mengatakan:

    Selamat siang saya mencoba untuk mendapatkan teks dalam textArea melalui javascript untuk mengirim ke database tapi aku tidak bisa, Apakah ada metode untuk mendapatkan teks?
    Terima kasih

  9. Selamat sore.
    Aku sedang berpikir untuk menggunakan perangkat ini untuk resep dokter – sesuatu yang begitu sederhana bahkan.
    – Ingin tahu cara mengkonfigurasi bar bagian atas (di mana adalah fungsi) Sembunyikan (seperti tombol kecil untuk membuatnya menghilang setelah mengedit teks)
    – Juga Bagaimana Apakah saya bisa sembuh dari bar bagian bawah (mana tampaknya “tubuh” dan tag lain) ?
    – Bagaimana cara membuat kotak teks dengan “tinggi” Otomatis: jenis, Jika saya resep 10 kotak akan obat-obatan encompridando sementara aku mengetik… Jika saya ketik hanya 1 obat ini di ketinggian kotak yang saya ketik…

    • Halo, Maaf, Ada beberapa potongan (kegagalan) dalam kode Anda, Jadi saya akhirnya menghapus itu.

      Hal ini Anda perlu, Sangat mungkin, tapi saya sarankan mencari profesional yang mengerti JavaScript untuk membantu Anda.

      Aku hanya akan mengatakan cara batu:

      – Menyembunyikan panel alat (Toolbar):

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

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

      – Menambah tinggi badan secara otomatis (autogrow):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (demonstrasi)

      Contoh:

      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>
        <kepala>
          <judul>Ckeditor</judul>
          <Meta konten="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>  <!-- mendapatkan plugin.JS http://ckeditor.com/addon/autogrow-->  
          <jenis script="text/javascript">
           jendela.OnLoad = fungsi()  {
              CKEDITOR.menggantikan( 'editor1', {             
                  removePlugins: 'elementspath', 
                  removePlugins: 'toolbar',
                  extraPlugins: 'autogrow',
                  autoGrow_minHeight: 70,
                  tinggi: '70px'
              });
           };
          </script>
        </kepala>
        <tubuh>
          <bentuk tindakan="request.php" metode="post">
            <TextArea id="editor1" Nama="editor1">Awal teks.</TextArea>
            <jenis input="submit" nilai="Submit" />
          </bentuk>  
        </tubuh>
      </HTML>
  10. Odilon mengatakan:

    Saya tidak dapat memasukkan teks dalam database dengan benar, baik aneh

    mantan:
    <p>&aacute; &adalah; &iacute;ASD</p>
    untuk

  11. Claudio mengatakan:

    Halo Taylor, Selamat untuk posting yang sangat baik menjelaskan. Saya ingin menggunakan editor ini dalam aplikasi PHP dan ingin tahu bagaimana membuat sebuah combo (atau tombol) di toolbar untuk membawa BD data untuk memasukkan dalam teks? IE, Ketika Anda mengklik pada tombol akan membuka kotak dialog dengan hasil query untuk Pilih sebuah record.
    Kamu bisa?

  12. Glaydison Silva mengatakan:

    Halo, Great posting. Bisa menyarankan posting baru? Butuh bantuan untuk melaksanakan sebuah tombol untuk meng-upload gambar, sama dengan mana Anda dapat pindah ke server DEMO dan semacamnya. Aku tidak bisa cara apapun.

Tinggalkan balasan

Alamat email Anda tidak akan dipublikasikan. Kolom yang harus diisi ditandai dengan *