Integrasi SyntaxHighlighter di Text Editor TinyMCE

Seperti yang diinginkan mas eky di dalam salah satu komentar artikel, saya ingin berbagi tips mengintegrasikan syntaxhighlighter di dalam text editor tinyMCE. Mungkin ada di antara pembaca yang belum mengenal syntaxhighlighter. Sintaxhighlighter merupakan engine javascript yang sangat powerful untuk menampilkan artikel yang berisi source code suatu program. Lebih-lebih bagi Anda yang ingin berbagi source code di dalam web, modul ini dapat Anda sertakan supaya source code lebih user-friendly.

Sebelum masuk ke dalam tutorial akan saya jelaskan dahulu konsep utama dalam mengintegrasikan syntaxhighlighter. Sebagai text editor, tinyMCE biasanya diletakkan di dalam halaman admin untuk keperluan menulis artikel. Dalam sisi ini, syntaxhighlighter perlu kita tambahkan di dalam menu bar tinyMCE. Artinya, kita perlu menambah plugin syntaxhighlighter tersebut ke dalam folder plugin tinyMCE. Jika sudah berhasil, akan terlihat menu tambahan di dalam menu bar tinyMCE untuk menuliskan source code.

Penjelasan tersebut merupakan hal yang kita lakukan di sisi admin. Kemudian, untuk menampilkan source code tersebut di halaman artikel, yang kita butuhkan adalah engine utama syntaxhighlighter yang terdiri dari program javascript dan CSS. Sebenarnya fungsi syntaxhighlighter lebih kita khususkan untuk halaman pembaca. Plugin di dalam tinyMCE hanya menuliskan syntax html yang dapat dikenali oleh syntaxhighlighter dan ditampilkan dalam bentuk source code yang sesuai. Oke, langsung kita mulai saja..

1. Silahkan download plugin syntaxhighlighter untuk tinymce di sini.

Asumsi saya, Anda telah berhasil mengintegrasikan tinyMCE di dalam aplikasi Anda. Extract file hasil downloadan tadi di dalam folder ‘plugins’ tinyMCE. Di dalam inisialisasi tinyMCE, tuliskan

tinyMCE.init({
	...
	plugins : "pagebreak,style,table,save,advhr,advimage,advlink,emotions,inlinepopups,insertdatetime,preview,media,searchreplace,syntaxhl,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,wordcount,advlist",
	...
	theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect,syntaxhl",
	...
});

Tambahkan plugin dan button “syntaxhl” di dalam inisialisasi seperti source code di atas. Silahkan cek di halaman text editor tinyMCE Anda. Jika berhasil, akan terdapat menu “insert code using syntaxhighlighter”.

syntaxHL

Jika di klik akan tampil modal box untuk menuliskan source code.

syntaxHL

Tahap pertama selesai, sekarang kita masuk ke halaman di sisi pembaca.

2. Download engine syntaxhighlighter di sini.

Buat folder ‘js’ di dalam root aplikasi web Anda. Extract dan letakkan hasil download tadi di situ. Untuk halaman bacaan artikel ketikkan code berikut di dalam tag <head>:

<link type="text/css" rel="stylesheet" href="<?php echo base_url();?>js/syntaxhighlighter/styles/shCoreDefault.css"/>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shBrushJscript.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shBrushPlain.js"></script>
<script type="text/javascript" src="<?php echo base_url();?>js/syntaxhighlighter/scripts/shBrushSql.js"></script>
<script type="text/javascript">SyntaxHighlighter.all();</script>

Karena menggunakan codeigniter, code saya tuliskan dengan mengambil nilai base url. Jadi, code html artikel yang dihasilkan oleh tinyMCE tadi akan dibaca oleh engine syntaxhighlighter dan ditampilkan lebih user-friendly seperti artikel ini.

Catatan:
Setelah code disimpan dalam database, contoh hasil generate html-nya jika memilih php seharusnya seperti ini.

<pre class="brush: php;">
//Kode
</pre>

Oiya, file telah saya reupload, karena domain catatankaki.com sudah mati 😀

Selamat mencoba

farid

Selamat datang dan salam kenal. Penulis merupakan lulusan Sekolah Tinggi Ilmu Statistik Jakarta jurusan Komputasi Statistik. Menekuni pemrograman web khususnya PHP dengan Yii Framework. Penggemar musik instrumen dan film Doraemon. Berasal dari Kota Lumpia Semarang dan pernah bertugas menjadi Staf Produksi dan IPDS di BPS Kabupaten Melawi. Sejak tahun 2016, mulai bertugas sebagai Staf Pengolahan Data di BPS Provinsi Kalimantan Barat

You may also like...

  • http://www.berthojoris.com/ Bertho

    Mas, mau nanya ne….
    Langkah diatas udah ane lakuin tapi pas di halaman user (pembaca artikel) ga ada perubahan ya SyntaxHighlighter-nya? apa di HTMLnya user (pembaca) perlu ditambahin apa lagi mas selain include (js dan css) ???

    • farid

      sudah dipanggil fungsi SyntaxHighlighter.all(); ?

      • http://www.berthojoris.com/ Bertho

        Sudah koq om….
        Saya taruh di template-nya sesuai dengan contoh om diatas

      • http://www.berthojoris.com/ Bertho

        Di file view CI-nya ane codingan ane seperti ini om :
        result() as $row) {
        $gambar = $row->gambar;
        echo “$row->judul “;
        if ($gambar!=”){
        ?>

        <img src="/system/artikel/”>

        isi;

        }
        ?>

        Ada yg harus ditambahin ya om buat munculin artikel yg ada sintax-nya?
        Kalo yg di databasenya seperti ini data yg kesimpan dari TinyMCE :
        Coba Lihat Code Dibawah
        <?php
        echo “Keren”;
        ?>

        • farid

          Kalau di dalam tinyMCE sudah keluar menu syntaxhighlighter, berarti pengintegrasian berhasil. Coba tulis code di editor tinyMCE dan disimpan. Kalau masih tidak tampil di view website, cek link url javascript dan css lewat view source browser, mungkin pointing file-nya salah.

          • http://www.berthojoris.com/ Bertho

            Di halaman admin Editor TinyMCE-nya dah sukses diintegrasikan…Dan sudah bisa disave ke database..
            Nah pas di load ke halaman artikel-nya (sisi user) dia hasilnya kek gini :
            http://berthojoris.com/gambar/output.png

            Data yg ada di database-pun telah sukses didalam tag
            Ini datanya :
            Bisa juga ne
            <?php
            echo “Keren”;
            ?>

            Nah pas load ke sisi user yg bermasalah, apa hanya dengan echo $row->isi_artikel;
            engine SyntaxHighlighter bisa membedakan mana yg di tag Tulisan Biasa dan mana yg didalam tag Berisi Code PHP
            ??

  • farid

    Silahkan baca catatan di artikel atas. Repot dari tadi mau nulis code di comment 😀

    • http://www.berthojoris.com/ Bertho

      wow…….Thanks bro…dah bisa…:)
      Ternyata source yg w cari di google yg salah…Harusnya dah bisa.
      Semalam kan Link Download-nya mati, makanya ane cari di google..Padahal ga cocok, pake punya mas barusan akhirnya bisa..:)

  • Mr Anonim

    Kok gambarnya gak bisa di lihat ya?

    • farid

      iya.. dulu diupload di photobucket. Udah expired 😀

  • Yudi Purwanto

    mas saya kan udah ngikutin cara yang di atas, nah kenapa setelah di panggil di halaman pengguna jadi gni
    padahal saya cuma nulis ini
    tapi kenapa ada dan tampilan kayak gtu
    ss di bawah mas

    • kampungkali

      coba cek view source-nya. Apakah code di artikel sudah benar? kalau sudah, lihat header-nya, apakah resource sudah ada?

      • Yudi Purwanto

        udah mas, udah terpanggil semua, apanya ya yang salah, bisa kasih ssnya hasil jadinya ?

  • Pingback: Integrasi Text Editor TinyMCE di Codeigniter