Mengirim data dari input textarea yang berupa TinyMCE melalui Jquery ternyata tidak bisa dilakukan apa adanya, karena jika pengesetan tinyMCE dilakukan apa adanya maka javascript tidak dapat value dari input tinyMCE secara langsung. Agar Jquery mampu menangkap dan kemudian mengirimkan value ke fungsi pemroses, maka tambahkan konfigurasi berikut pada konfigurasi tinyMCE
1 2 3 4 5 |
setup: function (editor) { editor.on('change', function () { editor.save(); }); }, |
Kode tersebut yang akan menangkap nilai dari tinyMCE. Berikut kode yang lumayan lengkap.
HTML
1 |
Deskripsi <textarea name="deskripsi" id="deskripsi" rows="6"></textarea> |
Javascript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
<script type="text/javascript"> tinymce.init({ selector: 'textarea', setup: function (editor) { editor.on('change', function () { editor.save(); }); }, height: 300, theme: 'modern', plugins: [ 'advlist autolink lists link image charmap print preview hr anchor pagebreak', 'searchreplace wordcount visualblocks visualchars code fullscreen', 'insertdatetime media nonbreaking save table contextmenu directionality', 'emoticons template paste textcolor colorpicker textpattern imagetools codesample toc' ], toolbar1: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image', //toolbar2: 'print preview media | forecolor backcolor emoticons | codesample', image_advtab: true, templates: [ { title: 'Test template 1', content: 'Test 1' }, { title: 'Test template 2', content: 'Test 2' } ], content_css: [ '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i', '//www.tinymce.com/css/codepen.min.css' ] }); $.ajax({ url: '<?php echo base_url('savedata.php');?>', type: 'POST', data: new FormData(this), dataType: 'json', contentType: false, processData: false, success: function(){ alert('Data sukses tersimpan'); }, error: function(jqXHR, textStatus, errorThrown){ console.log('jqXMLHTTReq: '+jqXHR+', Status: '+textStatus+', Error: '+errorThrown); }, }); </script> |