---

Solusi Tinymce Tidak Dapat Menampilkan Sourcecode Di Tag Pre

Plugin Tinymce adalah plugin text editor yang sudah support WYSISYG dan penggunaannyapun sangat mudah. Namun di beberapa kasus terdapat sedikit masalah salah satunya di saat update data yang berisikan bait program di dalam tag pre.

Kasus ini saya alami saat perancangan website ini, dimana saat menambah data yang berisikan bait kode html yang saat itu menggunakan plugin codesample pada Tinymce data dapat tersimpan dengan baik dan dilihat di detail sesuai dengan yang diinginkan. Namun ketika data hendak di diperbaharui, pada text editor tinymce tidak muncul kode html yang sebelumnya saya simpan.

Setelah mencari tahu di berbagai situs akhirnya saya mendapat penyebab permasalahannya simana permasalahannya simpel yaitu perlu dilakukan perubahan simbol “<” dan “>” ke &lt; dan &gt; pada tag <pre><code></code></pre>.

Untuk solusi dari permasalahan di atas maka saya mencoba merubah simbol tersebut dengan fungsi htmlentities() yang dimiliki PHP.

Fungsi htmlentities() akan merubah semua karakter seperti yang saya tampilkan pada Tabel 1 ke dalam bentuk ASCII.

Table 1. Konversi Simbol ke Ascii.

Simbol	Ascii
<	&lt;
>	&gt;
&	&amp;
"	&quot;
'	&apos;
¢	&cent;
£	&pound;
¥	&yen;
€	&euro;
©	&copy;
®	&reg;

Fungsi htmlentities() saya terapkan ketika data konten di load pada halaman update. Kurang lebih kodenya seperti berikut:

<div class="form-group">
   <label>Konten: *</label>
   <textarea class="form-control" name="konten" id="konten" rows="4"
   data-bv-notEmpty="true"><?= htmlentities($row['konten']) ?></textarea>
</div>

dan konfigurasi tinymce:

tinymce.init({
 selector: '#konten',
 entity_encoding: "raw",
 height: 400,
 menubar: false,
 forced_root_block: "",
 force_br_newlines: true,
 force_p_newlines: false,
 plugins: [
   'advlist autolink lists link charmap preview anchor',
   'searchreplace visualblocks code fullscreen',
   'insertdatetime media table contextmenu paste code codesample'
 ],
 toolbar: 'undo redo | formatselect fontselect fontsizeselect | bold underline italic |
 alignleft aligncenter alignright alignjustify | bullist numlist outdent indent
 blockquote | hr removeformat subscript superscript | table link | code codesample',
 setup: function (editor) {
   editor.on('change', function () {
     editor.save();
   });
 }
});

Dengan kode di atas permasalahan tidak tampilnya code saat pembaharuan data di plugin tinymce dapat teratasi.

Demikian solusi yang bisa saya berikan semoga bisa membantu anda.

---