Widodo

Menambah Plugin Codemirror Di TinyMCE 4

Menambah Plugin Codeirror di dalam Editor TinyMCE 4

Selamat siang teman-teman hari ini saya akan memberikan sebuah tutorial menambah plugin codemirror di dalam editor tinyMCE 4, pada umumnya TinyMCE WYSIWYG Editor dilengkapi dengan editor sumber HTML tetapi tampilanya masih dasar. Untuk itu saya telah mencoba untuk  menerapkan plugin Codemirror didalam TinyMCE yang nantinya akan  membuat tampilan pengeditan kode sumber HTML  yang lebih menyenangkan dan seperti halnya anda coding dalam editor notepad++ atau yang lainya.


Adapun fitur-fiitur yang ada pada Codemirror

  • Sintaks HTML, Javascript dan kode PHP
  • Penomoran
  • Menyorot baris saat sedang diedit
  • Dll

Untuk itu langsung saja kita praktekkan :

1. Silahkan download dan install TinyMCE 4 dan pastikan berjalan dengan benar dengan pengaturan default.

2. Download Plugin Codemirror dari sumber aslinya di sini atau disini

3. Setelah itu silahan extrack masing-masing pluginnya

4. Setelah di extract buatlah satu document baru dengan format html dan simpan dalam folder tinyMCE

5. Setelah itu silahkan copy dan paste plugin codemirror dalam folder  plugin tinyMCE

    tinymce\plugins\codemirror

6. Setelah itu buka lagi document yang kita baru buat tadi dan panggil masing-masing javascriptnya seperti dibawah ini :

<script src="tinymce/tinymce.min.js"></script>
<script src="tinymce/plugins/pre/editor_plugin.js"></script>

7. Sekarang kita buat textareanya seperti dibwah ini :

<textarea id="editor"  cols="60" rows="15">s-widodo.com</textarea>

Lihat baik-baik text yang berwarna merah itu ID yand diambir dari  sumber  TinyMCE

8. Sekarng kita buat jquerynya untuk code defaultnya TinyMCE seperti ini :

<script type="text/javascript">
tinymce.init({
    selector: "textarea",
    plugins: [
        "advlist autolink lists link image charmap print preview anchor",
        "searchreplace visualblocks code fullscreen",
        "insertdatetime media table contextmenu paste"
    ],
    toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"
});
</script>

dan kita akan merubahnya seperti dibwah ini yang sudah di gabungkan sama plugin Codemirror

<script type="text/javascript">
tinymce.init({
  selector: '#editor',
   height:400,
  plugins: 'codemirror',
  toolbar: 'undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | code',
  codemirror: {
    indentOnInit: true,
    path: 'codemirror-4.8',
    config: {
      lineNumbers: true       
    }
  }
});
</script>

Plugin tinyMCE kompatible hampir semua browser sayangnya untuk  Interner Explorer 6 atau 7, tidak  bekerja.

Selesai silahkan jalankan di browser kalian masing-masing :)

Kalian juga bisa mendownload plugin editor TinyMCE yang sudah kami gabungkan dengan plugin Codemirror dibawah ini:



0 Komentar