I am working on TinyMCE text editor with upload image using PHP and JS database but I am confused to send the image on the server -
JS code -
<script src='//tinymce.cachefly.net/4.2/tinymce.min.js'></script>
<script>
$(document).ready(function() {
tinymce.init({
selector: "textarea",
theme: "modern",
paste_data_images: true,
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"
],
toolbar1: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
toolbar2: "print preview media | forecolor backcolor emoticons",
image_advtab: true,
file_picker_callback: function(callback, value, meta) {
if (meta.filetype == 'image') {
$('#upload').trigger('click');
$('#upload').on('change', function() {
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(e) {
callback(e.target.result, {
alt: ''
});
};
reader.readAsDataURL(file);
});
}
},
templates: [{
title: 'Test template 1',
content: 'Test 1'
}, {
title: 'Test template 2',
content: 'Test 2'
}]
});
});
</script>
Image is not showing - The showing text -
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD/4QCyRXhpZgAATU0AKgAAAAgABwESAAMAAAABAAEAAAE+AAUAAAACAAAAYgE/AAUAAAAGAAAAcgMBAAUAAAABAAAAolEQAAEAAAABAQAAAFERAAQAAAABAAAOxFESAAQAAAABAAAOxAAAAAAAAHolAAGGoAAAgIMAAYagAAD5/wABhqAAAIDpAAGGoAAAdTAAAYagAADqYAABhqAAADqYAAGGoAAAF28AAYagAAGGoA
HTML -
How to upload image and display on the page using PHP -
I tried this example - https://codepen.io/nirajmchauhan/pen/EjQLpV
How to upload an image on the server and retrieve with the image blob link