Tutorial Menambahkan class image pada tinymce text editor

Tutorial Menambahkan class image pada tinymce text editor

loading....

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 iniTampilan asli tinymce html text edittor

  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 iniTampilan sesudah di sisipkan  tinymce html text edittor

  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

Artikel Menarik Lainnya
HTML, Java Script, CSS

loading...