Menu
tinyMCE has an insert image button, but how to handle its functionality pls give some code
911
When you want tinymce upload image laravel, you should add the script at the top like the code below. And in your tinymce image_class_list, you should mention "img-responsive", for the images to be responsive on mobile device. You need to have an action name in your blade within TinyMCE script.
To upload a new image open the upload panel in the image browser. Open the Image info tab and click Browse server. A new window will open where you see all your uploaded images. Open the Settings to choose another upload path.
I have upvoted the code written by @pavanastechie, but I ended up rewriting it quite a lot. Here's a version that is far shorter, which might have value to some people
tinymce.init({
toolbar : "imageupload",
setup: function(editor) {
var inp = $('<input id="tinymce-uploader" type="file" name="pic" accept="image/*" style="display:none">');
$(editor.getElement()).parent().append(inp);
inp.on("change",function(){
var input = inp.get(0);
var file = input.files[0];
var fr = new FileReader();
fr.onload = function() {
var img = new Image();
img.src = fr.result;
editor.insertContent('<img src="'+img.src+'"/>');
inp.val('');
}
fr.readAsDataURL(file);
});
editor.addButton( 'imageupload', {
text:"IMAGE",
icon: false,
onclick: function(e) {
inp.trigger('click');
}
});
}
});
NOTE: this relies on jquery, and won't work without it. Also, it assumes that the browser supports window.FileReader, and doesn't check for it.
139
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
