Menambah List Judul dan Keterangan pada plugin Gambar Editor Tinymce

Menambah List Judul dan Keterangan pada plugin Gambar Editor Tinymce

Dalam sebuah artikel atau tutorial gambar merupakan sebuah konten yang sering digunakan untuk memperjelas suatu hal. Pada gambar itu sendiri terdapat beberapa bagian, dimana setiap bagian memiliki fungsi dan tujuan. Dua diantara beberapa bagian tersebut diantaranya adalah judul dan keterangan gambar yang memiliki fungsi dan tujuan untuk memberikan judul dan keterangan gambar agar dapat lebih mudah dimengerti pembaca. Tujuan yang lebih penting dari judul dan keterangan gambar adalah memberikan meta title dan meta description di mata mesin telusur atau dengan istilah yang lebih mudah disebut dengan SEO.

Tanpa penambahan List Judul dan Keterangan pada plugin Gambar Editor Tinymce, untuk menambahkan judul dan keterangan gambar dilakukan dengan manual. Yaitu melalui metode text(nonvisual) atau dengan menggunakan editor html. Agar penambahan judul dan keterangan gambar yang dimaksud dapat dilakukan dengan cara lebih mudah, maka harus menambahkan list judul dan keterangan gambar tersebut pada plugin gambar.

Cara Menambah List Judul dan Keterangan Gambar

Silahkan buka admin.php pada root_dir/po-admin/admin.php, copy dan tambahkan script code dibawah ini pada bagian editor tinymce, dibawah toolbar2:

image_advtab: true,
image_caption: true,
image_title: true,

Sehingga secara keseluruhan script editor tinymce menjadi seperti berikut:

<script type="text/javascript">
  function initMCEall(){
    tinymce.init({
      mode: "textareas",
      editor_deselector : "mceNoEditor",
      skin: "lightgray",
      height: "800",
      content_css : "<?=WEB_URL.DIR_INC;?>/css/bootstrap.min.css,<?=WEB_URL.DIR_INC;?>/css/font-awesome.min.css",
				plugins: [
					"advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak",
					"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
					"table contextmenu directionality emoticons paste textcolor responsivefilemanager",
					"code fullscreen youtube codemirror codesample"
				],
				menubar : false,
				toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent table",
				toolbar2: "| fontsizeselect | styleselect | link unlink anchor | responsivefilemanager image media youtube | forecolor backcolor | code codesample fullscreen ",
		image_advtab: true,
		image_caption: true,
		image_title: true,
    bbcode_dialect: "punbb",
    wordcount_countregex: /[wu2019x27-u00C0-u1FFF]+/g,
    wordcount_cleanregex: /[0-9.(),;:!?%#$?x27x22_+=/-]*/g,
    image_advtab: true,
    fontsize_formats: "8px 10px 12px 14px 18px 24px 36px",
    relative_urls: false,
    remove_script_host: false,
    external_filemanager_path: "../<?=DIR_INC;?>/js/filemanager/",
    filemanager_title: "File Manager",
    external_plugins: {
      "filemanager" : "<?=WEB_URL.DIR_INC;?>/js/filemanager/plugin.min.js"
    },
    codemirror: {
      indentOnInit: true,
      path: "<?=WEB_URL.DIR_INC;?>/js/codemirror"
    }
   });
 }
</script>
<?php if (file_exists("../".DIR_CON."/component/".strtolower($mod)."/admin_javascript.js")) { ?>
<script type="text/javascript" src="../<?=DIR_CON;?>/component/<?=strtolower($mod);?>/admin_javascript.js"></script>
<?php } ?>
<script type="text/javascript">
  tinymce.init({
    selector: "#po-wysiwyg",
    editor_deselector : "mceNoEditor",
    skin: "lightgray",
    content_css : "<?=WEB_URL.DIR_INC;?>/css/bootstrap.min.css,<?=WEB_URL.DIR_INC;?>/css/font-awesome.min.css",
		plugins: [
			"advlist autolink link image imagetools lists charmap print preview hr anchor pagebreak",
			"searchreplace wordcount visualblocks visualchars insertdatetime media nonbreaking",
			"table contextmenu directionality emoticons paste textcolor responsivefilemanager",
			"code fullscreen youtube autoresize codemirror codesample"
		],
		menubar : false,
		toolbar1: "undo redo | bold italic underline | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent table",
		toolbar2: "| fontsizeselect | styleselect | link unlink anchor | responsivefilemanager image media youtube | forecolor backcolor | code codesample fullscreen ",
	  image_advtab: true,
		image_caption: true,
		image_title: true,
  });
</script>

Simpan perubahan yang baru saja anda tambahkan.
Untuk melihat hasil penambahan yang baru saja anda lakukan, silahkan edit post yang sudah ada atau melalui penambahan post baru. Pada editor silahkan klik penambahan gambar.