Tutorial Menambahkan class image pada tinymce text editor

Sebelum nya Rumah code sudah pernah menulis tentang tutorial tinymce text editor, nah sakarang Rumah Code akan memberikan tutorial lain tentang tinymce yaitu tutorial untuk menambahkan class pada menu insert/edit image. Ok sekarang mari kita mulai tutorial nya.

Langkah menambahkan image class pada tinymce:

1. Masukan tinymce.js

   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tinymce/5.1.2/tinymce.min.js"></script>​

2. Buatlah text area dengan id artikel

   <textarea id="artikel">
   </textarea>​

3. Ubahlah text area menjadi tinymce tex editor dengan menggunakanskrip berikut

   tinymce.init({
     selector: '#artikel',
     height: 500,
     plugins: [
       "advlist autolink lists link image charmap print preview anchor",
       "searchreplace visualblocks code fullscreen",
       "insertdatetime media table paste imagetools wordcount"
     ],
     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
     content_css: [
       '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
       '//www.tiny.cloud/css/codepen.min.css'
     ]
   });

   tampilan image editor pada tinymce akan tampak seperti ini

4. sisipkan kode untuk menambahkan class image pada kode di atas

   image_class_list: [
   		{title: 'None', value: ''},
   		{title: 'Fluid', value: 'img-fluid'},
   		{title: 'Thumbnail', value: 'rounded img-thumbnail'},
   		{title: 'Thumbnail FL', value: 'rounded img-thumbnail float-left'},
   		{title: 'Thumbnail FR', value: 'rounded img-thumbnail float-right'}
   	  ], ​

   setelah disisipkan tampilan nya akan berubah menjadi seperti ini

5. class yang saya sisipkan adalah class dari bootstrap 4
6. Hasil akhir script nya akan menjadi seperti ini

   tinymce.init({
     selector: '#artikel',
     height: 500,
     plugins: [
       "advlist autolink lists link image charmap print preview anchor",
       "searchreplace visualblocks code fullscreen",
       "insertdatetime media table paste imagetools wordcount"
     ],
     toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
     content_css: [
       '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
       '//www.tiny.cloud/css/codepen.min.css'
     ],
     image_class_list: [
   		{title: 'None', value: ''},
   		{title: 'Fluid', value: 'img-fluid'},
   		{title: 'Thumbnail', value: 'rounded img-thumbnail'},
   		{title: 'Thumbnail FL', value: 'rounded img-thumbnail float-left'},
   		{title: 'Thumbnail FR', value: 'rounded img-thumbnail float-right'}
   	  ]
   });

nah begitulah tutorial menambahkan class untuk image editor pada tinymce. Berikut ini demo nya untuk tutorial di atas