Cara Memasang TextEditor CKEDITOR

Assalamualaikum, halo para pembaca dokumenary.net… ☺

Senang sekali rasanya saya Almazari bisa menyapa kembali teman – teman semua. Semoga apa yang sedang anda cari, blog ini bisa memberikan setidaknya sedikit informasi yeng dapat membantu.

Pada kesempatan kali ini, kita akan sama-sama mempelajari bagaimana sih caranya memasang library javascript bernama CKEDITOR pada halaman web kita.

What you see is what you get (WYSIWYG) ini merupakan istilah yang sering digunakan untuk menggambarkan jawaban dari pertanyaan apa sih texteditor itu? Untuk gampangnya, Anda tentunya sudah pernah menggunakan Microsoft word atau semacamnya kan? ya itu, jadi apa yang kita tulis di ms word ya itu yang kita dapatkan, hasilnya sangat persis, kita tidak perlu mengetahui kode sebenarnya untuk menampilkan sebuah kata menjadi tebal, miring, garis bawah dan lain sebagainya. Nah CKEDITOR ini memiliki fungsi yang sama dengan ms word, namun beda alam.

Sebenarnya sudah banyak javascript library untuk texteditor lain yang serupa seperti
Tinymce, Bootstrap wysiwyg, Quill, Froala, Summernote dan lain-lain.

Masing – masing memiliki kelebihan dan kekurangan namun memiliki fungsi sama. Tentu jika kita sebagai developer kita ambil yang paling mudah digunakan dan powerfull… oh ya plus gratis, hehe. Untuk itu posting kali ini kita hanya akan membahas CKEDITOR saja, bukan berarti editor lain tidak bagus lo ya.

Fitur CKEDITOR kalo saya lihat sudah lengkap, standarnya juga sudah bagus. Kelebihan yang saya temukan adalah, kita dimudahkan sekali saat ingin menggunakan library ini, misalnya:

  • Kita dapat dengan mudah mengatur toolbar yang akan kita tampilkan pada texteditor, karena mereka sudah menyediakan alat untuk mengatur toolbar disini.
  • Jika kita membutuhkan plugins atau istilahnya fungsi lain yang belum ada pada paket standartnya, coba kita cari dulu diplugins list yang ada disini, mana tau sudah ada yang buat. Saya sebelumnya juga sudah mencoba mencari beberapa plugins salah satunya plugin untuk memasukkan file suara bertipe .mp3 dan ternyata sudah ada, tinggal pasang saja.
  • Dokumentasinya jelas banget, baik untuk fungsi-fungsi yang ada dieditornya, maupun plugins yang akan kita pasang.
  • Sudah banyak yang menggunakan, artinya sudah banyak pembahasan mengenai editor ini terutama distackoverflow.
  • Saya merasa mudah saat mengkonfigurasi dan memasangnya.

Dan berikut langkah – langkah memasang CKEDITOR:

  1. Download CKEDITOR di http://ckeditor.com/download, pilih Full Package saja.
    download-ckeditor

  2. Pindahkan folder ckeditor ke assets aplikasi web kita, misalnya struktur folder projek seperti berikut:
    struktur-folder

    Download juga jquery dan masukkan ke folder assets/jquery

  3. Misalkan saya membuat file index.html sejajar dengan folder assets, maka memanggil ckeditor cukup mudah:
    [html]
    <!– panggil jquery –>
    <script type="text/javascript" src="assets/jquery/jquery-3.1.1.min.js"></script>
    <!– panggil ckeditor.js –>
    <script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
    <!– panggil adapter jquery ckeditor –>
    <script type="text/javascript" src="assets/ckeditor/adapters/jquery.js"></script>
    <!– setup selector –>
    <script type="text/javascript">
    $(‘textarea.texteditor’).ckeditor();
    </script>
    [/html]

    Ini contoh full codenya:
    [html]
    <!DOCTYPE html>
    <html>
    <head>
    <title>Cara Memasang TextEditor CKEDITOR</title>
    </head>
    <body>
    <form>
    <p>Isi Berita:</p>
    <p>
    <textarea name="berita" class="texteditor"></textarea>
    </p>
    <p><button type="submit">SIMPAN</button></p>
    </form>

    <!– panggil jquery –>
    <script type="text/javascript" src="assets/jquery/jquery-3.1.1.min.js"></script>
    <!– panggil ckeditor.js –>
    <script type="text/javascript" src="assets/ckeditor/ckeditor.js"></script>
    <!– panggil adapter jquery ckeditor –>
    <script type="text/javascript" src="assets/ckeditor/adapters/jquery.js"></script>
    <!– setup selector –>
    <script type="text/javascript">
    $(‘textarea.texteditor’).ckeditor();
    </script>
    </body>
    </html>
    [/html]

    Maka hasilnya akan seperti berikut:
    contoh-ckeditor

    Cukup menambahkan class=”texteditor” pada attribute form textarea saja ckeditor sudah terpanggil. Jika dalam satu halaman ada dua class texteditor maka texteditornya juga muncul dua.

  4. Mudah kan ya… projek yang kita bangun menjadi lebih apik.

    Bagi pengguna framework codeigniter, jika ingin memasang ckeditor pada framework codeigniternya konsepnya juga sama saja, tinggal ganti cara pemanggilan path lokasinya saja menjadi seperti berikut:
    [php]
    <!– panggil jquery –>
    <script type="text/javascript" src="<?php echo base_url(‘assets/jquery/jquery-3.1.1.min.js’); ?>"></script>
    <!– panggil ckeditor.js –>
    <script type="text/javascript" src="<?php echo base_url(‘assets/ckeditor/ckeditor.js’); ?>"></script>
    <!– panggil adapter jquery ckeditor –>
    <script type="text/javascript" src="<?php echo base_url(‘assets/ckeditor/adapters/jquery.js’); ?>"></script>
    <!– setup selector –>
    <script type="text/javascript">
    $(‘textarea.texteditor’).ckeditor();
    </script>
    [/php]

    Cara mengganti toolbar ckeditor

    Kita dapat mengatur toolbar ckeditor sesuai dengan keinginan kita, caranya pakai tool yang sudah disediakan pada file yang kita download, tool tersebut terletak difolder samples/toolbarconfigurator. Jadi kita tinggal memanggilnya pada alamat http://localhost/nama_folder_projek/assets/ckeditor/samples/toolbarconfigurator/#basic

    toolbar-config

    Dengan menggunakan tool tersebut, kita dapat merubah posisi atau mendisable fungsi yang kita anggap tidak perlu.

    Setelah mengatur sesuai dengan keinginan kita, cara mendapatkan codenya dengan cara klik tombol Get Toolbar Config maka akan diberikan code toolbarnya. Copy dan paste pada file assets/ckeditor/config.js.

    Cara menginstall addon/plugin

    Misalkan kita membutuhkan plugin tambahan untuk insert video youtube pada editor kita, hal tersebut cukup mudah untuk dilakukan. Berikut langkah – langkahnya:

    Pertama, kita cari pluginnya di http://ckeditor.com/addons/plugins/all, masukkan kata kunci “youtube video” kedalam field search, maka akan ditampilkan plugin – plugin untuk youtube.

    Kedua, sebagai contoh, saya download salah satu plugin bernama Youtube Plugin, kemudian extract dan pindahkan folder youtube kedalam folder assets/ckeditor/plugins/.

    Kediga, tambahkan config.extraPlugins = ‘youtube’; pada file assets/ckeditor/config.js.
    [js]
    CKEDITOR.editorConfig = function( config ) {
    // Define changes to default configuration here. For example:
    // config.language = ‘fr’;
    // config.uiColor = ‘#AADC6E’;
    config.extraPlugins = ‘youtube’;
    };
    [/js]

    Maka akan dijumpai icon baru seperti ini youtube-icon pada editor.

    Studi Kasus : Menyimpan form ckeditor menggunakan ajax

    Ada kalanya kita membutuhkan ajax untuk memproses sebuah form yang salah satu fieldnya menggunakan ckeditor, jika tidak menggunakan ajax ya tinggal post saja ke url form action tujuan. Tetapi jika menggunakan ajax, kita perlu mengetahui bangaimana caranya mendapatkan content yang sudah ditulis dieditor untuk diproses insert kedalam database.

    Agar setiap field dapat dibedakan, maka kita harus menambahkan attribute id pada field textarea kita, misalkan form textarea kita seperti ini:
    [html]
    <p>Isi Berita:</p>
    <p>
    <textarea name="berita" id="isi-berita" class="texteditor"></textarea>
    </p>
    <p><button type="submit" id="simpan">SIMPAN</button></p>
    [/html]

    Maka code jquery ajaxnya bisa dibuat seperti ini:
    [js]
    <script type="text/javascript">
    $(document).on(‘click’, ‘#simpan’, function() {
    var isi_berita = CKEDITOR.instances[‘isi-berita’].getData();
    $.ajax({
    type: "POST",
    url: "http://url-aksi-yang-menerima-post",
    data: {‘berita’: isi_berita },
    success: function (data) {
    alert("Berita berhasil disimpan.");
    }
    });
    });
    </script>
    [/js]

    Dengan begitu, skrip yang berfungsi menangkap post dapat mengambil variable $_POST[‘berita’] yang berisi berita yang sudah ditulis pada editor.

    Baik sepertinya sudah selesai posting kali ini, semoga bisa memberikan pencerahan dan tambahan informasi untuk teman – teman semua.

    Terimakasih ya sudah mampir kemari, jika ada yang belum jelas silakan berkomentar untuk kita diskusikan sama – sama.

    Maturnuwun, Assalamulaikum wr.wb

    Category: Javascript, Uncategorized

    Tags: , , , , ,

Comments

  1. kalo mau menabahkan font arabic sama hanacara gimana mas caranya?

    Reply
  2. mas,, sudah sy tes youtube pluginx.. tapi gak ada lagi mas.. apa ada yg salah mas?? makasih untuk solusinya

    Reply
  3. mas ko cek editornya ga kepanggil sih

    Reply
  4. terima kasih mas atas artikel ini, saya sudah bisa memasang ckeditor, namun ketika saya coba dengan ajax, mengapa data yang di ckeditor tidak terpangil ya,
    kalau kiranya ada waktu mohon dibantu ya mas.

    Reply
    • Apa sudah seperti contoh:
      [js]
      var isi_berita = CKEDITOR.instances[‘isi-berita’].getData();
      $.ajax({
      type: "POST",
      url: "http://url-aksi-yang-menerima-post&quot;,
      data: {‘berita’: isi_berita },
      success: function (data) {
      alert("Berita berhasil disimpan.");
      }
      });
      [/js]

      Kalo belum jalan coba dimasukkan alert dulu isi_berita nya, buat memastikan dapat isi editornya.
      alert(isi_berita);

      Reply
  5. kalo edit/updatenya giaman bro script ajaxnya….thx

    Reply
    • Ini bahasan beda mas, tergantung pakai bahasa apa, kalo PHP dan mysql berarti cari tutorial buat CRUD php.

      Reply
  6. buy viagra pills no Chlomid, temping, or anything Then with 2 I had done 4 rounds of Chlomid prior to having extreme pains develop each cycle which lead to the discovery of the cyst on my ovary and the endometriosis diagnosis

    Reply
  7. Donde Comprar Cialis Generico Fiable
    (Admin)
    Cialis 5 mg prezzo cialis prezzo cialis 5 mg prezzo

    Reply
  8. 소닉카지노사이트
    February 15, 2024 - 1:42 pm

    saungsantoso.com
    “아니!” Fang Jifan의 두 단어는 직접적으로 세 사람을 심연에 빠뜨 렸습니다.

    Reply
  9. 소닉카지노사이트
    February 18, 2024 - 7:50 pm

    10yenharwichport.com
    그들은 여러 곳에서 집을 임대해야 하고 그들을 도와줄 사람을 고용해야 합니다.

    Reply
  10. dota2answers.com
    그의 뒤를 돌아보면 서산학원의 모든 학생들은 공격적이었다.

    Reply
  11. 소닉카지노 링크
    February 22, 2024 - 5:29 am

    dota2answers.com
    Zhu Houcong은 부끄러움없이이 왕 삼촌을 무표정하게 바라 보았습니다.

    Reply
  12. pragmatic-ko.com
    그 직후 의대생들이 테디처럼 모여들어 떠나기를 거부했다.

    Reply
  13. strelkaproject.com
    그렇게 말하자 홍지황제의 눈이 살짝 붉어졌다.

    Reply
  14. pragmatic-ko.com
    Zhu Houzhao는 고개를 저었다. “아니, 나는 당신을 기다리지 않을 것입니다.”

    Reply
  15. hihouse420.com
    지금 후대에 있는 이 물건은 비정규직이라는 이름을 가지고 있습니다.

    Reply
  16. pragmatic-ko.com
    누군가 꾸짖었다: “마오지, 왜 웃어, 어떻게 감히 황실 앞에 서 있느냐…”

    Reply
  17. smcasino-game.com
    February 28, 2024 - 11:57 am

    sm-casino1.com
    폐하께서 3일 후에 결과를 밝히라고 하셨으니… 당연히 3일이 될 것입니다.

    Reply
  18. pragmatic-ko.com
    February 29, 2024 - 5:36 pm

    lfchungary.com
    Zhu Houzhao도 이것을 이해했고 그것을 듣고 갑자기 무언가를 깨달았습니다.

    Reply
  19. pragmatic-ko.com
    March 1, 2024 - 10:05 pm

    pragmatic-ko.com
    Xiao Jing은 서둘러 앞으로 나아갔습니다. “폐하 … 폐하 …”

    Reply
  20. smcasino-game.com
    March 2, 2024 - 12:47 pm

    yangsfitness.com
    “나가!” 왕진위안은 이빨을 드러내며 이 뻔뻔한 것들을 혐오스럽게 바라보았다.

    Reply
  21. pragmatic-ko.com
    March 3, 2024 - 1:37 am

    lfchungary.com
    모든 사람들이 줄을 지어 봉천당으로 가서 떼를 지어 서 있었다.

    Reply
  22. jbustinphoto.com
    뉴스가 나왔으니 홍치 황제의 기대를 크게 뛰어 넘었습니다.

    Reply
  23. pragmatic-ko.com
    March 4, 2024 - 6:43 am

    pragmatic-ko.com
    그러나 소위 일본의 정예 경비대원들과 병사들과 함께 할 수 있습니까?

    Reply
  24. smcasino-game.com
    March 5, 2024 - 9:25 am

    mega-slot66.com
    Wang Jinyuan은 안도의 한숨을 쉬고 Fang Jifan에게 감사하는 표정을 지었습니다.

    Reply
  25. shopanho.com
    건장한 인물이 궁궐 문에 나타나자 홍지황제의 눈이 빛났다.

    Reply
  26. parrotsav.com
    그곳에서 그는 음식과 옷에 대해 걱정할 필요가 없었고 월급을 두 번 받았습니다.

    Reply
  27. 온라인슬롯사이트
    March 7, 2024 - 3:20 pm

    windowsresolution.com
    군자는 말싸움을 잘하고 무술은 잘하지 않으며, 그 성을 가진 송곳니와는 정면으로 맞서지 않는다.

    Reply
  28. yangsfitness.com
    Fang Jifan은 약간 당황했고 Zhu Zaimo를 노려 볼 수밖에 없었습니다.

    Reply
  29. apksuccess.com
    장인들은 모두 기성품이며, 백본 그룹을 이전하는 것 외에도 다른 그룹을 모집해야 합니다.

    Reply
  30. khasiss.com
    Wen Yansheng이 말했습니다.

    Reply
  31. sm-casino1.com
    Hongzhi 황제는 차가운 얼굴로 “내가 Datong에 가라고 명령했는데 왜 아직 가지 않았습니까?”

    Reply
  32. raytalktech.com
    그리고 낮은 수준의 농부로서 그는 악취가 나는 문제가 있어야합니다.

    Reply
  33. laanabasis.com
    Zhu Houzhao는 추측하지 않을 수 없었습니다. “음식은 사막에서 재배됩니다. 고구마를 의미합니까?”

    Reply
  34. lipitor pills order atorvastatin pill atorvastatin 10mg pill

    Reply
  35. khasiss.com
    Fang Jifan은 기침을하며 “아가씨 … 이거 …”라고 말했습니다.

    Reply
  36. sm-online-game.com
    Wen Yansheng이 말했습니다.

    Reply
  37. l-inkproject.com
    Fang Jifan도 배를 두드리고 낚시하는 문제가 완료된 것을보고 안도의 한숨을 쉬었습니다.

    Reply
  38. cipro us – where can i buy augmentin augmentin uk

    Reply
  39. ciprofloxacin 500mg canada – buy keflex pills amoxiclav price

    Reply
  40. jelenakaludjerovic.com
    Zhu Houzhao는 더 이상 감히 그를 반박하지 않고 순종적으로 말했습니다. “내 목사는 명령에 따릅니다.”

    Reply
  41. crazyslot1.com
    Ma Wensheng은 그를 바라보며 “Shen 씨, 당신은 모든 에너지를 잃었습니다. “라고 말했습니다.

    Reply
  42. purchase ciprofloxacin without prescription – buy tinidazole medication buy generic erythromycin 500mg

    Reply
  43. 슬롯사이트
    March 17, 2024 - 8:36 pm

    windowsresolution.com
    Liu Jian도 Ouyang Zhi의 방법에 동의하여 말을 할 수밖에 없었습니다.

    Reply
  44. generic flagyl 200mg – order cefaclor pill zithromax 250mg usa

    Reply
  45. ivermectin 3 mg pills – ciplox 500 mg cheap sumycin 500mg brand

    Reply
  46. mojmelimajmuea.com
    Zhu Houzhao는 “내 아들…”이라는 몇 마디 말을 하고 싶어하는 것 같았습니다.

    Reply
  47. sm-slot.com
    그러나 … 그는 실제로이 트릭을 수행하기 위해 Fang의 집에 감히 왔습니다.

    Reply
  48. order generic valtrex 1000mg – purchase nemasole generic zovirax where to buy

    Reply
  49. ampicillin antibiotic penicillin medication buy generic amoxil for sale

    Reply
  50. apksuccess.com
    Fang Jifan의 심장은 뛰고 Zhu Houzhao는 미소를 지었지만 그의 눈은 누군가를 죽이려는 것처럼 보였습니다.

    Reply
  51. buy flagyl 400mg without prescription – purchase cefaclor generic zithromax 500mg for sale

    Reply
  52. ttbslot.com
    그러나 젊은 스승이 없는 왕금원은 늘 마음이 공허했다.

    Reply
  53. order generic lasix 40mg – medex price capoten pills

    Reply
  54. qiyezp.com
    즉, Fang Jifan은 원하는대로 마음을 정할 수 있고 원하는대로 할 수 있습니다.

    Reply
  55. order metformin 1000mg – trimethoprim pill order lincomycin 500 mg online cheap

    Reply
  56. qiyezp.com
    Zhu Houzhao의 작은 행동은 지금 그를 어리석게 만들었습니다.

    Reply
  57. sandyterrace.com
    March 26, 2024 - 2:19 pm

    sandyterrace.com
    Xie Qian이 이상하다고 말한 이유는 아마도 이것 때문일 것입니다!

    Reply
  58. zidovudine usa – order generic rulide 150 mg order zyloprim 100mg

    Reply
  59. buy clozapine 50mg without prescription – amaryl sale order pepcid generic

    Reply
  60. fpparisshop.com
    March 28, 2024 - 1:39 am

    bmipas.com
    素晴らしい記事で、いつも新鮮な情報を提供してくれて感謝しています。

    Reply

Leave a Reply

Your email address will not be published / Required fields are marked *